从零開始制作H5应用（2）——V2.0版，多页单张图片滑动，透明过渡及交互指示

上一次。我们制作了我们第一个H5场景应用的V1.0版，这次我们趁热打铁。在上一版的基础上对层序进行改动和扩展。

任务

1、页面数量由3张增加至9张；

2、每张页面中放入一张全屏自适应的图片。

3、修复页面过渡中的白场，并在过渡时增加页面的透明效果

4、给予用户“向上滑动“的交互提示；

分析

老规矩，拿到任务需求后，我们还是要先详细分析每一步的实现思路：

1.页面数量由3张增加至9张

这个太简单啦。就是再复制出来6个div。并给他们增加类名就能够啦：）

2、每张页面中放入一张全屏自适应的图片

这一项的关键在于自适应，可否知道 img {width:100%}的写法？

3、修复页面过渡中的白场并增加透明效果

白场问题是因为我们的切换方式是隐藏/显示，所以这一次我们改为让它移出屏幕主体，而不是隐藏，而透明效果则须要替换animation属性啦。

4、给予用户“向上滑动”的交互提示

这个问题仅仅须要一张png图片并加一点循环的动画（animation)就能够啦！

实现

第一步，增加页面数量

index.html

<div id="pages">

        <div class="page page1">页面一</div>
        <div class="page page2">页面二</div>
        <div class="page page3">页面三</div>
        <div class="page page4">页面四</div>
        <div class="page page5">页面五</div>
        <div class="page page6">页面六</div>
        <div class="page page7">页面七</div>
        <div class="page page8">页面八</div>
        <div class="page page9">页面九</div>

    </div>

style.css

……
.page3 {
  background: yellow;
}
.page4 {
  background: #AA22FF;
}
.page5 {
  background: #ff050e;
}
.page6 {
  background: #999999;
}
.page7 {
  background: #444400;
}
.page8 {
  background: #267DB7;
}
.page9 {
  background: #ffcc80;
}
……

看看效果：

这一次，因为要调试自适应，所以我们使用了火狐浏览器自带firebug的自适应调试模式，并开启了手势操作模拟功能。

第二步：每页增加全屏自适应图片

我们在百度图片上下载了例如以下图片：

这些图片大多是640*900的分辨率，因为手机设备眼下最大宽度是640px，至于高宽比，为了更好地自适应。越大越好。

然后增加到页面中并在css中增加自适应的样式：

index.html

 <div id="pages">

        <div class="page page1"><img src="imgs/001.jpg" alt=""/></div>
        <div class="page page2"><img src="imgs/002.jpg" alt=""/></div>
        <div class="page page3"><img src="imgs/003.jpg" alt=""/></div>
        <div class="page page4"><img src="imgs/004.jpg" alt=""/></div>
        <div class="page page5"><img src="imgs/005.jpg" alt=""/></div>
        <div class="page page6"><img src="imgs/006.jpg" alt=""/></div>
        <div class="page page7"><img src="imgs/007.jpg" alt=""/></div>
        <div class="page page8"><img src="imgs/008.jpg" alt=""/></div>
        <div class="page page9"><img src="imgs/009.jpg" alt=""/></div>

    </div>

style.css

……
.page img {
  width: 100%;
  height: 100%;
}
……

看看效果：

这里要特别注意的是。你的图片比例必须与主流设备分辨率的宽高比尽量接近，否则同一时候设置图片宽和高都为100%时。会有一定程度的变形。假设想避免这样的情况出现，能够将图片设为外层DIV 的背景图片，并使用backgroud-size来设置图片自适应。

第三步：修复白场，增加透明效果

这里我们得又一次设计一下，在初始状态下，全部的页面都是显示的。但因为全部页面都是重叠的，所以仅仅要设置第一页的z-index为这些页面中的最大值。就能够保证第一页覆盖在全部页面之上，从而造成仅仅显示第一页的效果。

改造后的CSS例如以下：

style.css

……
.page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  z-index: 1;
}
……
.page1 {
  background: blue;
  display: block;
  z-index: 100;
}
……
.hide {
  z-index: 1;
}
.show {
  z-index: 100;
}

再看看切换效果：

我们发现。在下一页向上滑动出现的过程中，下一层总是显示最后一个页面，而且在第一轮切换结束后，第二轮的切换就没有了过渡动画，这是为什么呢？

我们发现。我们在页面切换时除了给下一页增加show类（z-index:100）的时候，给当前页增加了一个hide类（z-index:1）,而我们发现。此时其它全部的页面也都是z-index:1,依照浏览器默认规则，z-index同样的元素，最后载入的在最上层

而且第一轮切换时给页面加的各种动画效果都没有及时清除。导致第二轮效果无法生效，所以会出现图中所看到的状况。

好了，知道了原因。我们再次对css和JS进行改造，而且让图片切换时显示一定的透明度渐变效果（通过改变从animation.css里调用的动画名来实现）：

style.css

……
.hide {
  z-index:99;
}
……

myfn.js

var curpage=1;
var totalpage,nextpage,lastpage,nexttotalpage;

$(document).swipeUp(function(){

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

        //获取总页数,以及总页数的+1后的序号，供后面for循环使用
    totalpage = $(".page").length;
    nexttotalpage = totalpage+1;
    //假设是最后一页，显示第一页，并移除全部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;
    }
});

如今我们再看效果：

这次就正常了，而且切换时有了透明效果。

第四步 交互指示

我们准备了以下这张png图片作为向上的指示图片：

我们将它布局到index.html最后面

index.html

……

    <div class="upicon"><img src="upicon.png" alt=""/></div>

</body>
</html>

然后在style.css里给它定义样式，记住。一定要让它的z-index大于100！因为我们之前给当前页设置的样式z-index的值是100，要保证箭头一直处在最上层。

style.css

……
.show {
  z-index: 100;
}
.upicon {
  width: 60px;
  height: 60px;
  position: absolute;
  left: 50%;
  bottom: 20px;
  margin-left: -30px;
  z-index: 1000;
}
.upicon img {
  width: 60px;
}

这里有一点小技巧：当position为absolute时。left:50%,margin-left:-width/2，能够保证元素水平居中。假设想垂直也居中，则使用 top:50%,margin-top:-height/2

看看效果：

最后，我们让它动起来，给它增加一个循环的上下运动的效果就能够了。我们在index.html里引入animate.css插件并给箭头元素增加animation动画：

index.html

<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <title>H5场景应用1.0——实现页面滑动效果</title>
    <link rel="stylesheet" href="animate.css" type="text/css"/>
    <!--上面引入animate.css插件-->
    <link rel="stylesheet" href="animations.css" type="text/css"/>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
    <script src="touch.js"></script>
    <script src="myfn.js"></script>
</head>
<body>

    <div id="pages">

        <div class="page page1"><img src="imgs/001.jpg" alt=""/></div>
        <div class="page page2"><img src="imgs/002.jpg" alt=""/></div>
        <div class="page page3"><img src="imgs/003.jpg" alt=""/></div>
        <div class="page page4"><img src="imgs/004.jpg" alt=""/></div>
        <div class="page page5"><img src="imgs/005.jpg" alt=""/></div>
        <div class="page page6"><img src="imgs/006.jpg" alt=""/></div>
        <div class="page page7"><img src="imgs/007.jpg" alt=""/></div>
        <div class="page page8"><img src="imgs/008.jpg" alt=""/></div>
        <div class="page page9"><img src="imgs/009.jpg" alt=""/></div>

    </div>

    <div class="upicon animated infinite bounce "><img src="upicon.png" alt=""/></div>
    <!--上面应用animate的动画样式：animated infinite bounce-->

</body>
</html>

看看效果：

我们能够看到箭头已经实现了循环的上下跳动的动画。这样就能够在非常好地给用户传递了此页面是能够向上滑动的友好的交互提示了。

好了，至此，我们的第一个H5应用的V2.0版也完毕，接下来的V3.0版本号里。我们将继续完好和扩展我们的程序。敬请期待。