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

来源：互联网发布：yy挂机软件电脑编辑：程序博客网时间：2024/06/04 18:24

标签：

我们的第一个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版本就大功告成了。

0 0