今天易站网来说下zepto.js,有兴趣的开发者可以先进这个网站“http://zeptojs.com/” ,这个可以说是手机里的jquery,但是它取消了hover,加上了swipe及tap这两个触屏功能。易站网也做了一个百度基于zepto.js 的webapp UI,大家也可以看下:“http://gmu.baidu.com/”,有点像jquery ui的东西,大家有兴趣可以学习啊。。。

我们今天,用zepto.js的swipe来实现新浪手机网的tab菜单,大家可以先看下新浪的手机版“http://sina.cn/”。

深圳小程序开发

我们可以看到,新浪导航那里,并不是百分比,而是写好宽度,这样,它可以根据需要添加个数,而我一开始就将代码分成四个,因此,我们的tab个数就按百分比,分成四个显示了。。。

深圳小程序开发

这里,我加上了zepto.js的tap功能,主要是在我在IPAD上用click,结果发现民间幕会闪,好晕。。。

深圳小程序开发

看到swipeLeft这个,你会不会想到之前的touchSwipe的写法,有兴趣的可以看看这文章:“touchSwipe实现3G凤凰网手机触屏Tab菜单”。不过,touchSwipe里就没有tap这个函数了。。。

那么,这里提一下,我们这个zepto.js是修改过的,原来的版本,在IPAD及手机上滑动时,页面会滚动,我在源文件里的touchmove写上e,preventDefault(),结果连滚动条都动不了,头晕啊。。。

在zepto.js里,我们也可以知道swipe这个功能实现的原理:

深圳小程序开发

我们可以看到,是通过两个点之间触屏的距离来判断是向左还是右或是向上向下swipe。。。

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

深圳小程序开发

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

预览地址:http://www.163css.net/net163/cssjs/2013/01/zeptotab/index.html

下载地址:zepto.js swipe实现触屏tab菜单.rar

稳定

产品可用性高于99.9%

贴心

全国7*24小时客服热线

专业

产品经理在线技术支持

快速

快速上线运营快

承诺

我们选择声誉

坚持

10年专注高端品质开发
  • 返回顶部