您的位置：首页 > Web前端 > HTML5

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

2015-11-30 10:55 627 查看

标签：

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航