touchSwipe实现3G凤凰网手机触屏Tab菜单

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

关于触屏TAB菜单,我们之前做过一个例子,当时,我们采用了touchslider这个脚本,我们模仿了网易3g的例子,那么今天,我们换一种方式,我们采用touchSwipe来做,touchSwipe是基于jquery的脚本,提供了touchLeft,touchRight,touchUp,touchDown的方法,这给我们的工作带来了方便。

我们看下我们的HTML结构:

我们可以看到,里面不带ID,相对于“手机触屏TAB菜单”,我们可以无限复制多个,当然,前者也要可以多个,只是代码比较复杂。

我们仍然采用百分比的模式。。。我们设置为25%,这里采用-webkit-transform,translate里可以加向左向右向上向下,这个功能非常类似jquery里的anitame,滚动起来也非常舒服。。。

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

呵,我们采用了http://3g.ifeng.com/的设计风格,只是我后面的小三角换成代码,这也是css3的transfrom的rotate功能。。。

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

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

下载地址:touchSwipe实现3G凤凰网手机触屏Tab菜单 (1).rar

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