touchSwipe百度新闻手机触屏滑动导航

作者:林炜贤来源:www.163css.com发表时间:(2012-12-11)

首先我们打开百度新闻,http://app.news.baidu.com/?src=yetou,当然,我们要选择手机版,由于手机上我没办法截图,因此,我就在PC上截个类似的图:

当我们的手在导航上滑动时,我们会发现,导航是可以滚动的,这类似于PC的鼠标点击左右控制按钮,当然了,我们都知道,手机上是采用手动触屏的。

那么,我们要如何实现这个效果呢?我们需要引进一个脚本,“http://labs.skinkers.com/touchSwipe/”,这个脚本帮我们实现了swipe的功能,我们就省去了写TOUCH的脚本了,这样,我们把注意力放在写功能上:

在这里,我们设置的ul的宽度为100*n,我们的li宽度为100/n/4,这样是为了屏幕自适应考虑,我一开始采用了document的width,结果转屏时就出错了,这样可以很好地解决这个问题,不过是采用了数学的计算方法。

当然,如果你需要一行排8个,那就改变下数字就OK啦。。

touchswipe这个脚本好处在于,我们可以swipeLeft这样的方式写脚本,多方便,当然,你要会jQuery才行。

以下是我制作的效果截图:

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.net/net163/cssjs/2012/12/bdtouch/index.html

下载地址:touchSwipe百度新闻手机触屏滑动导航.rar

返回作者主页:www.163css.com阅读 (8770)
更多 1