上一次。我们制作了我们第一个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版本号里。我们将继续完好和扩展我们的程序。敬请期待。

从零開始制作H5应用(2)——V2.0版,多页单张图片滑动,透明过渡及交互指示的更多相关文章

  1. 从零開始制作H5应用(4)——V4.0,增加文字并给文字加特效

    之前,我们分三次完毕了我们第一个H5应用的三个迭代版本号: V1.0--简单页面滑动切换 V2.0--多页切换,透明过渡及交互指示 V3.0--加入loading,music及自己主动切换 这已经是一 ...

  2. 从零開始学Swift之Hello World进化版

    上节课,也就是昨晚啦,我们学习到从零開始学Swift之Hello World.那一节仅仅有一句代码,大家会认为不够过瘾. 那么这节课,就给大家来多点瘾货吧! 先上图! //var 代表变量的类型, s ...

  3. 从零開始学习制作H5应用——V5.0:懊悔机制,整理文件夹,压缩,模板化

    经过前面四个版本号的迭代.我们已经制作了一个从视觉和听觉上都非常舒服的H5微场景应用,没有看过的请戳以下: V1.0--简单页面滑动切换 V2.0--多页切换.透明过渡及交互指示 V3.0--增加lo ...

  4. 《PHP 5.5从零開始学(视频教学版)》内容简单介绍、文件夹

    <PHP 5.5从零開始学(视频教学版)>当当网购买地址: http://product.dangdang.com/23586810.html <PHP 5.5从零開始学(视频教学版 ...

  5. 从零開始学习OpenCL开发(一)架构

    多谢大家关注 转载本文请注明:http://blog.csdn.net/leonwei/article/details/8880012 本文将作为我<从零開始做OpenCL开发>系列文章的 ...

  6. 关东升的《从零開始学Swift》即将出版

    大家好: 苹果2015WWDC大会公布了Swift2.0,它较之前的版本号Swift1.x有非常大的变化.所以我即将出版<从零開始学Swift><从零開始学Swift>将在&l ...

  7. # 从零開始搭建Hadoop2.7.1的分布式集群

    Hadoop 2.7.1 (2015-7-6更新),Hadoop的环境配置不是特别的复杂,可是确实有非常多细节须要注意.不然会造成很多配置错误的情况.尽量保证一次配置正确防止重复改动. 网上教程有非常 ...

  8. Bmob移动后端云服务平台--Android从零開始--(二)android高速入门

    Bmob移动后端云服务平台--Android从零開始--(二)android高速入门 上一篇博文我们简介何为Bmob移动后端服务平台,以及其相关功能和优势. 本文将利用Bmob高速实现简单样例,进一步 ...

  9. 从零開始怎么写android native service?

    从零開始怎么写android native service Android service对于从事android开发的人都不是一个陌生的东西,非常多人可能会认为服务非常easy. 服务是简单,由于复杂 ...

随机推荐

  1. MyEclipse常见错误汇总,中英注释版(长期更新)

    No.1 当一条语句漏写分号时错误描述如下 Syntax error, insert ";" to complete Statement(语法错误:插入分号完成语句描述) No.2 ...

  2. Android实现App版本自动更新

    现在很多的App中都会有一个检查版本的功能.例如斗鱼TV App的设置界面下: 当我们点击检查更新的时候,就会向服务器发起版本检测的请求.一般的处理方式是:服务器返回的App版本与当前手机安装的版本号 ...

  3. iOS开发下对MVVM的理解

    最近看到新浪微博上以及iOS开发的论坛里面谈到MVVM设计模式,所谓MVVM就是Model-View-ViewModel的缩写,关于MVVM的概念,这里我不想过多的介绍,有很多介绍的很详细的博文,这里 ...

  4. JavaScript,ES5和ES6的区别

    什么是JavaScript JavaScript一种动态类型.弱类型.基于原型的客户端脚本语言,用来给HTML网页增加动态功能.(好吧,概念什么最讨厌了) 动态: 在运行时确定数据类型.变量使用之前不 ...

  5. MySql系列之多表查询

    多表连接查询 #重点:外链接语法 SELECT 字段列表 FROM 表1 INNER|LEFT|RIGHT JOIN 表2 ON 表1.字段 = 表2.字段; 交叉连接:不适用任何匹配条件.生成笛卡尔 ...

  6. [Codeforces 841C]Leha and Function

    题目大意:定义函数F(n,k)为[1,2,3,..n]中k个元素的子集中最小元素的数学期望.现在给你两个长度相等的数列A,B(A中元素严格大于B中元素),现在要你重新排列A,使得$\sum\limit ...

  7. easyui-combobox实现取值范围的联动

    需求:需要用两个combobox来输入一个年月的范围,下拉框的内容从服务器获取.需要实现选中前者后,后者的下拉框中不能显示比前者数值小的:选中后者后,前者的下拉框内容不能显示比后者数值大的 有两个co ...

  8. LNMP安装部署开源IP管理工具phpipam

    1.数据库 mariadb 安装 //依赖安装 yum install -y apr* autoconf automake bison bzip2 bzip2* compat* \ cpp curl ...

  9. ArcGIS api for javascript——地图配置-增加标注到滑动器

    描述 ArcGISTiledMapServiceLayer,这意味着图层有一个在明确的比例的预先渲染的地图切片的cache.能够从tileInfo属性获得图层的的缓存比例数组.这是本例中标注如何被得到 ...

  10. easyui combobox 设置值 顺序放在最后

    easyui combobox 设置值 顺序放在最后 如果设置函数.又设置选中的值,注意顺序, 设置值需要放到最后,否则会设置了之后又没有了: $('#spanId'+i).combobox(res) ...