"从零开始学习制作H5应用——V3.0版,loading,背景音乐及自动切换"


title: "从零开始学习制作H5应用——V3.0版,loading,背景音乐及自动切换" layout: post category: 技术-前端 date: 2016-06-15 16:00:00 +0800 author: hjb2722404 tags: H5,教程 status: publish

我们的第一个H5应用经过V1.0V2.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版本就大功告成了。