現(xiàn)在手機(jī)網(wǎng)頁(yè)越來(lái)越多，我們可以先看下兩個(gè)地址：http://3g.ifeng.com/”，“http://3g.163.com/touch”，我們都會(huì)發(fā)現(xiàn)有一個(gè)共同的特點(diǎn)，就是TAB菜單，對(duì)于這種相當(dāng)傳統(tǒng)的特效，我們?cè)谥白鲞^(guò)許多，但在手機(jī)上，我們會(huì)發(fā)現(xiàn)它有新的生命力。
如果只是考慮上面的點(diǎn)擊，那就是TAB菜單了，只不過(guò)這個(gè)TAB菜單是全屏切換的，但如果你在手機(jī)上體驗(yàn)，會(huì)發(fā)現(xiàn)，手滑動(dòng)是可以實(shí)現(xiàn)切換，這個(gè)手勢(shì)在手機(jī)網(wǎng)頁(yè)上叫“swipe”，觸屏技術(shù)也促進(jìn)了我們前端技術(shù)的發(fā)展。
細(xì)心的朋友，可能會(huì)注意到，當(dāng)你切換的時(shí)候，下面的按鈕標(biāo)題也會(huì)跟著變，而且URL也會(huì)跟著變，這樣，你切換后，點(diǎn)擊下面的按鈕就可以進(jìn)入到相應(yīng)的欄目了，網(wǎng)易的策劃者，這個(gè)地方值得夸獎(jiǎng)啊。。。
那么，如何實(shí)現(xiàn)呢？
我們需要引進(jìn)一個(gè)腳本，touchslider.js方便我們實(shí)現(xiàn)觸屏的功能，如果自己寫(xiě)原生的腳本，估計(jì)就得一大堆了。。。
我這里，做了一個(gè)FOR循環(huán)，主要是為了解決ID方面的問(wèn)題，讓用戶(hù)可以多個(gè)使用，為了實(shí)現(xiàn)那個(gè)標(biāo)題及URL切換，我引進(jìn)了zepto_min.js，這個(gè)代碼兼容JQUERY的寫(xiě)法，就是小了點(diǎn)，適用于手機(jī)上，但好像少了HOVER那個(gè)方法啊，也許之所以小，就是因?yàn)閯h掉了一些功能，畢竟，對(duì)于原生的JS，我寫(xiě)起來(lái)很不習(xí)慣啊，抱歉。。。
以下是我制作的效果截圖：
