手机浏览器中横向循环滑动效果
用智能手机浏览网页,常常发现许多惊艳的滑动效果。垂直方向的滑动是智能手机的固有属性,这其实不算滑动,是滚屏而已。但有些横向滑动的效果,比如打开网易手机版: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