从零开始制作H5应用（3）——V3.0版，loading,背景音乐及自动切换

标签：

我们的第一个H5应用经过V1.0与V2.0的制作，已经越来越惊艳了，这一次，我们继续来给她梳妆打扮，让她更漂亮。

任务

1、加入页面加载完成前的loading动画，提升用户体验； 
2、加入背景音乐，自动播放，并添加控制图标，可以控制播放与暂停 
3、让页面实现自动切换。

实现

第一步：Loading动画

index.html 

……
<body>
<div class=‘loader loader--spinningDisc‘></div>
<div id="pages">
……

style.css 

.loader {
    margin: 10em auto;
    z-index:10000;
}

.loader--spinningDisc {
    border: solid 0.5em #9b59b6;
    border-right-color: transparent;
    border-left-color: transparent;
    padding: 0.5em;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: #3498db;
    background-clip: content-box;
    animation: spinDisc 1.5s linear infinite;
}
@keyframes spinDisc {
    50% {
        border-top-color: #3498db;
        border-bottom-color: #3498db;
        background-color: #2ecc71;
    }
    100% {
        transform: rotate(1turn);
    }
}

效果：

我们让它在页面加载完成之后就自动隐藏，并且让下面的箭头在页面完成加载后再出现：

myfn.js

window.onload = function(){
    $(".loader").css("z-index","1");
    $(".upicon").css("z-index","1000");
}

style.css

.upicon {
  width: 60px;
  height: 60px;
  position: absolute;
  left: 50%;
  bottom: 20px;
  margin-left: -30px;
  z-index: 1; //注意这里与之前的不同
}

好了，loading动画就处理好了。

第二步：背景音乐

我们先要准备好背景音乐的素材，最好是纯音乐的，并且经过剪切的，因为是移动端，既要考虑流量问题，也要考虑到我们整个应用的时长，并且充分利用循环播放的特性。

由于移动端浏览器基本上都是支持H5的，而我们做的也是基于H5的应用，所以我们直接采用H5的标签来在页面中插入音乐。

index.html 

……
<audio src="1.mp3" autoplay="autoplay" id="audio" hidden="hidden"></audio>

……

再次刷新浏览器，便可听到我们插入的悦耳的音乐了。

现在，我们加入控制图标并在myfn.js里编写控制播放与暂停的功能。

我们准备两张png格式的图片，分别在音乐播放与暂停时来显示，如图：

在页面中加入一个ID为audioPlay的div，负责显示图片：

index.html

……
<audio src="1.mp3" autoplay="autoplay" id="audio" hidden="hidden"></audio>
<div id="audioPlay"></div>
……

style.css

#audioPlay {
  width:38px;
  height: 38px;
  background-image: url("imgs/music_play.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 5%;
  right: 5%;
  z-index: 9999999;
}

效果如图：

然后我对myfn.js进行改造，将页面切换部分的代码封装为一个独立的功能函数，方便后面自动切换使用，为了避免与音乐控制按钮发生冲突，将页面切换监听事件绑定到.page之上。改造后的myfn.js全部代码如下：

myfn.js

$(function(){
    var curpage=1;
    var totalpage,nextpage,lastpage,nexttotalpage;
    totalpage = $(".page").length;
    nexttotalpage = totalpage + 1;

    window.onload = function(){
        $(".loader").css("z-index","1");
        $(".upicon").css("z-index","1000");
        initAudio("audio");
    }

    var audio;
    function initAudio(id){
        audio =  document.getElementById(id);
    }

    document.addEventListener(‘touchmove‘,function(event){
        event.preventDefault(); },false);

//控制音乐播放停止和音乐ico图标变换

    $(".page").swipeUp(function(){
        swichpage();
    })

    $("#audioPlay").on(‘click‘,function(){
        if(audio.paused){
            audio.play();
            this.style.backgroundImage="url(imgs/music_play.png)";
        }else{
            audio.pause();
            this.style.backgroundImage="url(imgs/music_pause.png)";
        }
    });

    function swichpage() {

//判断当前页是否为最后一页

        //获取总页数,以及总页数的+1后的序号，供后面for循环使用

        //如果是最后一页，显示第一页，并移除所有page上的所有css效果类，否则显示下一页，并移除上一页的切换动画效果
        if (curpage == totalpage) {
            for (var i = 1; i < nexttotalpage; i++) {
                $(".page" + i).removeClass("hide");
                $(".page" + i).removeClass("show");
                $(".page" + i).removeClass("pt-page-moveFromBottomFade");
            }
            $(".page1").addClass("show");
            $(".page1").addClass("pt-page-moveFromBottomFade");
            curpage = 1;
        } else {
            nextpage = curpage + 1;
            lastpage = curpage - 1;
            $(".page" + curpage).removeClass("pt-page-moveFromBottomFade");
            $(".page" + curpage).addClass("pt-page-moveToTopFade");
            $(".page" + curpage).removeClass("show");
            $(".page" + curpage).addClass("hide");
            $(".page" + nextpage).removeClass("hide");
            $(".page" + nextpage).addClass("show");
            $(".page" + nextpage).addClass("pt-page-moveFromBottomFade");
            $(".page" + lastpage).removeClass("pt-page-moveToTopFade");
            curpage = nextpage;
        }
    }
})
//the end

再次刷新浏览器，初始状态下音乐自动播放，并且控制按钮为亮色的，点击控制按钮后，音乐暂停播放，图标变为暗色，如下图：

第三步：自动切换

实现自动切换的原理其实就是一个典型的定时器功能，代码如下：

myfn.js 

……
            curpage = nextpage;
        }
    }
  setInterval(function(){
        swichpage();
    },4000);
})
// the end

这样就实现了页面每四秒自动切换至下一页的功能。

好了，这一次的改造相对来说比较简单，V3.0版本就大功告成了。