首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

手机浏览器中横向循环滑动成效

2013-01-22 
手机浏览器中横向循环滑动效果用智能手机浏览网页,常常发现许多惊艳的滑动效果。垂直方向的滑动是智能手机

手机浏览器中横向循环滑动效果

用智能手机浏览网页,常常发现许多惊艳的滑动效果。垂直方向的滑动是智能手机的固有属性,这其实不算滑动,是滚屏而已。但有些横向滑动的效果,比如打开网易手机版:http://3g.163.com/touch/,还是比较炫的,好像也是一个网站手机版的标准配备。

这种效果怎么弄出来呢?网易这个代码是加了密的,看不懂,注释显示,好像是用了老外的一个什么包,我英文差,没功夫去研究。在网上疯狂搜索,发现有篇大牛的文章,拿来试了一下,可以用,很不错。

不过大牛的效果是比较基本的,事先放置了3个块,每块显示一屏,但不能循环,向两边各滑动一两次就一片空白了,没有实现环形的滑动;另外它进入空白地带后,还是可以继续滑动,相当于将页面可见内容越滑越远。

我们做这个滑动效果,是为了更好地呈现数据,所以我又花了一些工夫进行修改,以期能应用到实际工作中。

1、滑动效果是为了更好地呈现数据,滑动效果一般有3块就行了,每次显示一块,余下两块分别移到当前块的左右两侧;而数据则可能有好多。所以数据和滑动块要分离,需要时才加载到滑动块来显示。如果有多少数据,就设置多少个滑动块,当然最简单,但页面代码也多了不少。

2、滑动块需要循环使用

3、支持触摸,否则在手机浏览器看不到效果

4、只有在滑动块范围内拉动和触摸才有效

没代码我说个J8:

页面

<meta content="width=device-width,initial-scale=1.0,user-scalable=no" name="viewport">
这一句很重要,规定页面宽度与手机屏幕一致。我查了一下,是HTML5的东西。靠,HTML5,我不懂耶。

参考文章:

http://www.cnblogs.com/xesam/archive/2012/05/18/2484426.html


热点排行