基于JavaScript實現(xiàn)移動端TAB觸屏切換效果
展示效果圖如下所示:
我們使用移動端時可以通過觸屏手勢左右滑動來切換TAB欄目,如網(wǎng)易新聞等APP欄目切換。我們說的TAB一般由導(dǎo)航條和TAB對應(yīng)的內(nèi)容組成,切換導(dǎo)航條上的標(biāo)簽同時標(biāo)簽對應(yīng)的內(nèi)容也會跟著切換。本文將結(jié)合實例給大家介紹一個移動端TAB觸屏切換效果。
HTML
我們準(zhǔn)備一個TAB導(dǎo)航#pagenavi,里面包含TAB導(dǎo)航要切換的四個導(dǎo)航按鈕,然后是切換的主體內(nèi)容#slider,這里應(yīng)該放置四個li與導(dǎo)航按鈕對應(yīng),內(nèi)容自定義。
<div class="box-163css"> <ul id="pagenavi" class="page"> <li><a href="#http://www.dbjr.com.cn/css.html" class="active">CSS3</a></li> <li><a href="#http://www.dbjr.com.cn/jquery.html">JAVASCRIPT</a></li> <li><a href="#http://www.dbjr.com.cn/php.html">PHP</a></li> <li><a href="#http://www.dbjr.com.cn/web.html">HTML5</a></li> </ul> <div id="slider" class="swipe"> <ul class="box01_list"> <li class="li_list"> ... </li> ...<!--總共4個li--> </ul> </div> </div>
當(dāng)然,我們還需要給HTML加上css樣式,本例已打包好css文件供大家下載。
JAVASCRIPT
由于是移動端應(yīng)用,我們加載zepto.js,zepto就是體積小的jquery。然后需要加載觸屏滑動插件touchslider.js。
<script type="text/javascript" src="js/zepto_min.js"></script> <script type="text/javascript" src="js/touchslider.js"></script>
接下來我們就直接調(diào)用TouchSlider,通過設(shè)置綁定tab,滑動方向、速度、時間等信息實現(xiàn)內(nèi)容切換,請看詳細(xì)代碼:
<script type="text/javascript"> var page='pagenavi'; var mslide='slider'; var mtitle='emtitle'; arrdiv = 'arrdiv'; var as=document.getElementById(page).getElementsByTagName('a'); var tt=new TouchSlider({id:mslide,'auto':'-1',fx:'ease-out',direction:'left',speed:600,timeout:5000,'before':function(index){ var as=document.getElementById(this.page).getElementsByTagName('a'); as[this.p].className=''; as[index].className='active'; this.p=index; var txt=as[index].innerText; $("#"+this.page).parent().find('.emtitle').text(txt); var txturl=as[index].getAttribute('href'); var turl=txturl.split('#'); $("#"+this.page).parent().find('.go_btn').attr('href',turl[1]); }}); tt.page = page; tt.p = 0; for(var i=0;i<as.length;i++){ (function(){ var j=i; as[j].tt = tt; as[j].onclick=function(){ this.tt.slide(j); return false; } })(); } </script>
以上內(nèi)容是本文的全部敘述,希望對大家學(xué)習(xí)有所幫助。
相關(guān)文章
js判斷數(shù)組key是否存在(不用循環(huán))的簡單實例
下面小編就為大家?guī)硪黄猨s判斷數(shù)組key是否存在(不用循環(huán))的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08利用Bootstrap Multiselect實現(xiàn)下拉框多選功能
這篇文章主要介紹了利用Bootstrap Multiselect實現(xiàn)下拉框多選功能,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-04-04javascript框架設(shè)計讀書筆記之模塊加載系統(tǒng)
本文是司徒正美的《javascript框架設(shè)計》的第二章模塊加載系統(tǒng)的讀書筆記,根據(jù)自己的理解,簡要的跟大家講述了本章的主要內(nèi)容,方便大家更好的學(xué)習(xí)。2014-12-12layui將table轉(zhuǎn)化表單顯示的方法(即table.render轉(zhuǎn)為表單展示)
今天小編就為大家分享一篇layui將table轉(zhuǎn)化表單顯示的方法(即table.render轉(zhuǎn)為表單展示),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09網(wǎng)上應(yīng)用的一個不錯common.js腳本
網(wǎng)上應(yīng)用的一個不錯common.js腳本...2007-08-08