jquery移動端TAB觸屏切換實現(xiàn)效果
我們使用移動端時可以通過觸屏手勢左右滑動來切換TAB欄目,如網(wǎng)易新聞等APP欄目切換。我們說的TAB一般由導(dǎo)航條和TAB對應(yīng)的內(nèi)容組成,切換導(dǎo)航條上的標(biāo)簽同時標(biāo)簽對應(yīng)的內(nèi)容也會跟著切換。本文將結(jié)合實例給大家介紹一個移動端TAB觸屏切換效果。
我們準(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="#">CSS3</a></li> <li><a href="#">JAVASCRIPT</a></li> <li><a href="#">PHP</a></li> <li><a href="#">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樣式,這塊根據(jù)自己的習(xí)慣愛好進(jìn)行設(shè)置。
由于是移動端應(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>
以上就是關(guān)于移動端TAB觸屏切換效果的關(guān)鍵代碼分享給大家,希望大家喜歡。
相關(guān)文章
通過jsonp獲取json數(shù)據(jù)實現(xiàn)AJAX跨域請求
JSON 可通過 JavaScript 進(jìn)行解析,JSON 數(shù)據(jù)可使用 AJAX 進(jìn)行傳輸,這篇文章主要介紹了通過jsonp獲取json數(shù)據(jù)(實現(xiàn)AJAX跨域請求),有興趣的可以了解一下。2017-01-01淺談jQuery中對象遍歷.eq().first().last().slice()方法
本文給大家分析了jQuery中的對象遍歷.eq().first().last().slice()方法的使用,以及他們之間的區(qū)別,jQuery源碼中的使用。2014-11-11