基於JavaScript實現移動端TAB觸屏轉場效果，javascripttab

基於JavaScript實現移動端TAB觸屏轉場效果，javascripttab

展示如下所示：

效果示範 源碼下載

我們使用移動端時可以通過觸屏手勢左右滑動來切換TAB欄目，如網易新聞等APP欄目切換。我們說的TAB一般由導航條和TAB對應的內容組成，切換導航條上的標籤同時標籤對應的內容也會跟著切換。本文將結合執行個體給大家介紹一個移動端TAB觸屏轉場效果。

HTML

我們準備一個TAB導航#pagenavi，裡麵包含TAB導航要切換的四個導覽按鈕，然後是切換的主體內容#slider，這裡應該放置四個li與導覽按鈕對應，內容自訂。

<div class="box-163css">   <ul id="pagenavi" class="page">     <li><a href="#http://www.bkjia.com/css.html" class="active">CSS3</a></li>      <li><a href="#http://www.bkjia.com/jquery.html">JAVASCRIPT</a></li>     <li><a href="#http://www.bkjia.com/php.html">PHP</a></li>     <li><a href="#http://www.bkjia.com/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>

當然，我們還需要給HTML加上css樣式，本例已打包好css檔案供大家下載。

JAVASCRIPT

由於是移動端應用，我們載入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>

接下來我們就直接調用TouchSlider，通過設定綁定tab，滑動方向、速度、時間等資訊實現內容切換，請看詳細代碼：

<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>

以上內容是本文的全部敘述，希望對大家學習有所協助。