手机网站wap手机触屏TAB菜单

时间:2014-11-28

现在手机网页越来越多,我们可以先看下两个地址: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,我写起来很不习惯啊,抱歉。。。

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

上一篇:手机新闻网站zepto.js swipe实现触屏tab切换菜单 下一篇:touchSwipe实现手机触屏滚动

相关文章

最新文章