从零开始制作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版本里，我们将继续完善和扩展我们的程序，敬请期待。