手机触屏TAB菜单

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

现在手机网页越来越多,我们可以先看下两个地址:“http://3g.ifeng.com/”,“http://3g.163.com/touch/”,我们都会发现有一个共同的特点,就是TAB菜单,对于这种相当传统的特效,我们在之前做过许多,但在手机上,我们会发现它有新的生命力。

如果只是考虑上面的点击,那就是TAB菜单了,只不过这个TAB菜单是全屏切换的,但如果你在手机上体验,会发现,手滑动是可以实现切换,这个手势在手机网页上叫“swipe”,触屏技术也促进了我们前端技术的发展。

细心的朋友,可能会注意到,当你切换的时候,下面的按钮标题也会跟着变,而且URL也会跟着变,这样,你切换后,点击下面的按钮就可以进入到相应的栏目了,网易的策划者,这个地方值得夸奖啊。。。

 那么,如何实现呢?

我们需要引进一个脚本,touchslider.js方便我们实现触屏的功能,如果自己写原生的脚本,估计就得一大堆了。。。

我这里,做了一个FOR循环,主要是为了解决ID方面的问题,让用户可以多个使用,为了实现那个标题及URL切换,我引进了zepto_min.js,这个代码兼容JQUERY的写法,就是小了点,适用于手机上,但好像少了HOVER那个方法啊,也许之所以小,就是因为删掉了一些功能,毕竟,对于原生的JS,我写起来很不习惯啊,抱歉。。。

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

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

预览地址:http://www.163css.com/hihilinxuan/cssjs/2012/11/navtouch/index.html

下载地址:手机触屏TAB菜单.zip

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