今天，Yizhan.com是Zepto.js的下一個(gè)。有興趣的開(kāi)發(fā)人員可以推進(jìn)這個(gè)網(wǎng)站“http://zeptojs.com/”。這可以說(shuō)是手機(jī)中的jquery，但它取消了懸停，加上滑動(dòng)和點(diǎn)擊。兩個(gè)觸摸屏功能。 Yizhan.com還根據(jù)zepto.js制作了百度webapp UI。你也可以閱讀：“http://gmu.baidu.com/”，有點(diǎn)像jquery ui，大家都有興趣學(xué)習(xí)。

今天，我們使用zipto.js的滑動(dòng)來(lái)實(shí)現(xiàn)新浪手機(jī)網(wǎng)絡(luò)的標(biāo)簽菜單。你可以先看看新浪的手機(jī)版“http://sina.cn/”。

我們可以看到新浪導(dǎo)航不是百分比，而是寬度，因此它可以根據(jù)需要添加任意數(shù)量的數(shù)字，并且我在開(kāi)始時(shí)將代碼分成四個(gè)，因此我們的選項(xiàng)卡是百分比。分為四個(gè)節(jié)目。

在這里，我添加了zepto.js的tap功能，主要是因?yàn)槲沂褂昧它c(diǎn)擊IPAD，發(fā)現(xiàn)民間屏幕會(huì)閃爍，所以暈了。

看看swipeLeft這個(gè)，你不會(huì)想到之前的touchSwipe寫(xiě)作，有興趣的可以看一下這篇文章：“touchSwipe實(shí)現(xiàn)3G鳳凰手機(jī)觸摸屏Tab菜單”。但是，touchSwipe中沒(méi)有tap功能。

所以，在這里，提到我們的zepto.js被修改，原始版本，當(dāng)在IPAD和手機(jī)上滑動(dòng)時(shí)，頁(yè)面將滾動(dòng)，我在源文件的touchmove中寫(xiě)e，preventDefault（），結(jié)果滾動(dòng)。酒吧不能動(dòng)，頭暈。

在zepto.js中，我們也可以知道函數(shù)滑動(dòng)的實(shí)現(xiàn)原理：

我們可以看到它是通過(guò)兩點(diǎn)之間的距離來(lái)確定它是向左還是向右還是向上和向下滑動(dòng)。

以上是我所做的效果的截圖：

下面我提供源文件，歡迎需要下載和使用的朋友：

預(yù)覽地址：http://www.163css.net/net163/cssjs/2002/01/zeptotab/index.html

下載地址：zepto.js swipe實(shí)現(xiàn)觸摸屏標(biāo)簽menu.rar

標(biāo)簽:＆amp; nbsp＆amp; nbsp沈陽(yáng)app開(kāi)發(fā)＆amp; nbsp沈陽(yáng)APP設(shè)計(jì)＆amp; nbsp沈陽(yáng)Marketing類(lèi)型網(wǎng)站建設(shè)