从零开始学习H5应用(1)——V1.0版,简单页面滑动切换效果
2015-11-30 10:52
489 查看
标签:
可曾看见过那些在微信上转疯了的H5神作?好生羡慕啊,那么从今天开始,我将从零开始学习制作H5应用,看看那么漂亮的页面是怎么样一步一步形成的。
HTML,CSS,JS基本编写与制作能力
了解了H5中的各种新特性
有一定的逻辑思维能力,可以将复杂任务通过分析简化为若干原子事件来处理
看得懂汉语,以及教程中出现的前端术语。
制作一个具有3张页面,每次只显示其中一张页面,当手指向上滑动设备屏幕时当前页面消失下一张页面出现,并具有一定的过渡效果
1、构建页面:具有三张页面,第一张显示,另外两张隐藏;
2、使用JS监听手势向上滑动的事件,并动态改变三张页面的显示/隐藏样式;
3、给页面显示和隐藏添加过渡的动画效果;
index.html
这里,我们为了方便看效果,在每个页面中加入了相应文字来标示该页面
然后,使用CSS文件进行样式布局:
style.css
这里,设置了统一的样式
给index.html引入样式:
我们来看看效果:
我们使用了Opera Mobile Emulator工具来在PC上模拟手机浏览器的显示和操作。
至此,第一步就很简单地完成了。
这里,我们推荐使用zepto.js类库,因为它默认提供了对触屏的滑动事件的支持。
将zepto.js引入index.html,这里,为了提升加载速度,我们使用百度静态资源库文件,并且同时引入我们自己用来写自定义功能的js文件
index.html
现在,在myfn.js里实现监听函数和页面隐藏,显示函数。
myfn.js
保存,看看效果:
说明我们引入zepto后对触屏的向上滑动事件的监听是成功的,那么现在我们可以编写内部页面隐藏显示的切换效果了。
在编写代码之前,我们把这一步的逻辑流程再细化一下,看看流程图:
开始获取当前页面序号,隐藏当前页是否为最后一页?显示第一页结束显示下一页yesno
这里面,我们明确了整个程序的外部流程,然后再来深究一下每一步操作的思路:
获取当前页面序号:
很显然,当前页面就是当前显示的页面,可以有两种方法来获取:
第一种是给当前页面添加class=”show”,然后获取时直接查找class=”show”的元素;
第二种是设置一个全局变量curpage,页面初次载入时它的值肯定是1,然后每次向上滑动,它的值自增1,就是当前页面的序号;
很明显,第二种实现起来比第一种要简单,而且效率和架构更优。
隐藏当前页
给当前页添加class=”hide”
判断是否为最后一页
在获取到当前页面序号后,就要判断是否为最后一页。那么如何判断呢?当然是先要知道总共有多少页,然后看当前页面序号是否与最大页数相等,相等,就是最后一页,不相等,则不是最后一页。而总页数就是#page下面的class为
显示第一页
这个很简单,给序号为1的页面设置class=”show”,将其他所有页面隐藏
显示下一页
获取到当前页序号后,这一步也很简单,就是让序号加1,然后让class为.page+序号的页面增加一个class=”show”就可以了
好了,有了以上分析,我们就可以开始编码了,最终实现代码如下:
myfn.js
然后在style.css里加入两个样式:
style.css
再来看效果:
页面刚载入是上图这样的
第一次向上滑动后切换到了页面二
第二次向上滑动后切换到了页面三
第三次向上滑动后页面又切回页面一
至此,我们用不多的代码完成了我们的V1.0版的任务,这一次代码不多,但是中间要对整个程序的流程进行分析与设计,这种思路是这一次的重点。这种思路确定后,以后的版本中在这一版本的基础上进行功能的扩展就简单多了,期待V2.0版哦!
可曾看见过那些在微信上转疯了的H5神作?好生羡慕啊,那么从今天开始,我将从零开始学习制作H5应用,看看那么漂亮的页面是怎么样一步一步形成的。
准备
在学习制作H5应用之前,必须具备以下基础前提:HTML,CSS,JS基本编写与制作能力
了解了H5中的各种新特性
有一定的逻辑思维能力,可以将复杂任务通过分析简化为若干原子事件来处理
看得懂汉语,以及教程中出现的前端术语。
任务
这是本系列的第一篇,任务非常简单,制作一个具有3张页面,每次只显示其中一张页面,当手指向上滑动设备屏幕时当前页面消失下一张页面出现,并具有一定的过渡效果
分析
虽然任务非常简单,我们还是要把它拆分为几部来做,如下:1、构建页面:具有三张页面,第一张显示,另外两张隐藏;
2、使用JS监听手势向上滑动的事件,并动态改变三张页面的显示/隐藏样式;
3、给页面显示和隐藏添加过渡的动画效果;
实现
第一步
首先,我们在html页面中构建页面结构:index.html
<div id="pages"> <div class="page page1">页面一</div> <div class="page page2">页面二</div> <div class="page page3">页面三</div> </div>
这里,我们为了方便看效果,在每个页面中加入了相应文字来标示该页面
然后,使用CSS文件进行样式布局:
style.css
#pages { width: 100%; heigt: 100%; } .page { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; color: white; } .page1 { background: blue; display: block; } .page2 { background: red; } .page3 { background: yellow; }
这里,设置了统一的样式
.page以便让三张页面都能全屏显示,并且设置绝对定位使他们完全重叠,给他们设置了不同背景色用于标识,并让第一页显示出来,其他两张隐藏。
给index.html引入样式:
<title>H5场景应用1.0——实现页面滑动效果</title> <link rel="stylesheet" href="style.css" type="text/css"/>
我们来看看效果:
我们使用了Opera Mobile Emulator工具来在PC上模拟手机浏览器的显示和操作。
至此,第一步就很简单地完成了。
第二步
首先,我们要监听用户的手势,这个向上滑动的事件怎么来做呢?这里,我们推荐使用zepto.js类库,因为它默认提供了对触屏的滑动事件的支持。
将zepto.js引入index.html,这里,为了提升加载速度,我们使用百度静态资源库文件,并且同时引入我们自己用来写自定义功能的js文件
myfn.js,现在它还是空的。还有一个js文件
touch.js也是必须的,它是zepto的一个模块,用来支持触屏操作,而zepto.js默认是不包含该模块的
index.html
<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>
现在,在myfn.js里实现监听函数和页面隐藏,显示函数。
myfn.js
//测试对swipeUp(向上滑动)的监听是否有效 $(document).swipeUp(function(){ alert("ok"); });
保存,看看效果:
说明我们引入zepto后对触屏的向上滑动事件的监听是成功的,那么现在我们可以编写内部页面隐藏显示的切换效果了。
在编写代码之前,我们把这一步的逻辑流程再细化一下,看看流程图:
开始获取当前页面序号,隐藏当前页是否为最后一页?显示第一页结束显示下一页yesno
这里面,我们明确了整个程序的外部流程,然后再来深究一下每一步操作的思路:
获取当前页面序号:
很显然,当前页面就是当前显示的页面,可以有两种方法来获取:
第一种是给当前页面添加class=”show”,然后获取时直接查找class=”show”的元素;
第二种是设置一个全局变量curpage,页面初次载入时它的值肯定是1,然后每次向上滑动,它的值自增1,就是当前页面的序号;
很明显,第二种实现起来比第一种要简单,而且效率和架构更优。
隐藏当前页
给当前页添加class=”hide”
判断是否为最后一页
在获取到当前页面序号后,就要判断是否为最后一页。那么如何判断呢?当然是先要知道总共有多少页,然后看当前页面序号是否与最大页数相等,相等,就是最后一页,不相等,则不是最后一页。而总页数就是#page下面的class为
.page的div的个数。
显示第一页
这个很简单,给序号为1的页面设置class=”show”,将其他所有页面隐藏
显示下一页
获取到当前页序号后,这一步也很简单,就是让序号加1,然后让class为.page+序号的页面增加一个class=”show”就可以了
好了,有了以上分析,我们就可以开始编码了,最终实现代码如下:
myfn.js
var curpage=1; var totalpage,nextpage; $(document).swipeUp(function(){ //隐藏当前页面 $(".page"+curpage).removeClass("show"); $(".page"+curpage).addClass("hide"); //判断当前页是否为最后一页 //获取总页数 totalpage = $(".page").length; //如果是最后一页,显示第一页,否则显示下一页 if(curpage == totalpage){ $(".page1").removeClass("hide"); $(".page1").addClass("show"); curpage =1; }else{ nextpage = curpage+1; $(".page"+nextpage).removeClass("hide"); $(".page"+nextpage).addClass("show"); curpage = nextpage; } });
然后在style.css里加入两个样式:
style.css
…… .page3 { background: yellow; } .hide { display: none; } .show { display: block; }
再来看效果:
页面刚载入是上图这样的
第一次向上滑动后切换到了页面二
第二次向上滑动后切换到了页面三
第三次向上滑动后页面又切回页面一
至此,我们用不多的代码完成了我们的V1.0版的任务,这一次代码不多,但是中间要对整个程序的流程进行分析与设计,这种思路是这一次的重点。这种思路确定后,以后的版本中在这一版本的基础上进行功能的扩展就简单多了,期待V2.0版哦!
相关文章推荐
- HTML5定稿一周年 你必须要重新认识HTML5了
- Web开发者选择的最佳HTML5/CSS3代码生成器
- HTML5 学习资料
- Web开发者选择的最佳HTML5/CSS3代码生成器
- html5 css3 入门教程
- html5实现摇一摇功能
- HTML5拖拽实现的小例子
- HTML5
- 《HTML5与CSS3基础教程》第1-3章
- Adobe edge animate制作HTML5动画可视化工具(一)
- 【HTML5】WebSocket和SSE
- HTML5 localStorage 本地存储
- HTML5创建一个径向/圆渐变
- (HTML5)phonegap的基础入门(一)
- HTML5创建线条渐变
- HTML5绘制空心的文本
- HTML5绘制实心的文本
- H5手机开发锁定表头和首列(惯性滚动)解决方案
- 【HTML5+css3】学习笔记之实体、元数据和全局属性
- 【HTML5+css3】学习笔记之表单元素