展示效果圖如下所示：
我們使用移動(dòng)端時(shí)可以通過觸屏手勢(shì)左右滑動(dòng)來切換TAB欄目，如網(wǎng)易新聞等APP欄目切換。我們說的TAB一般由導(dǎo)航條和TAB對(duì)應(yīng)的內(nèi)容組成，切換導(dǎo)航條上的標(biāo)簽同時(shí)標(biāo)簽對(duì)應(yīng)的內(nèi)容也會(huì)跟著切換。本文將結(jié)合實(shí)例給大家介紹一個(gè)移動(dòng)端TAB觸屏切換效果。
HTML
我們準(zhǔn)備一個(gè)TAB導(dǎo)航#pagenavi，里面包含TAB導(dǎo)航要切換的四個(gè)導(dǎo)航按鈕，然后是切換的主體內(nèi)容#slider，這里應(yīng)該放置四個(gè)li與導(dǎo)航按鈕對(duì)應(yīng)，內(nèi)容自定義。
<div class="box-163css"> <ul id="pagenavi" class="page"> <li><a href="#//m.survivalescaperooms.com/css.html" class="active">CSS3</a></li> <li><a href="#//m.survivalescaperooms.com/jquery.html">JAVASCRIPT</a></li> <li><a href="#//m.survivalescaperooms.com/php.html">PHP</a></li> <li><a href="#//m.survivalescaperooms.com/web.html">HTML5</a></li> </ul> <div id="slider" class="swipe"> <ul class="box01_list"> <li class="li_list"> ... </li> ...<!--總共4個(gè)li--> </ul> </div> </div>
當(dāng)然，我們還需要給HTML加上css樣式，本例已打包好css文件供大家下載。
JAVASCRIPT
由于是移動(dòng)端應(yīng)用，我們加載zepto.js，zepto就是體積小的jquery。然后需要加載觸屏滑動(dòng)插件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，滑動(dòng)方向、速度、時(shí)間等信息實(shí)現(xiàn)內(nèi)容切換，請(qǐng)看詳細(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)容是本文的全部敘述，希望對(duì)大家學(xué)習(xí)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
