JavaScript_javascriptスキルに基づいたモバイル端末のTABタッチスクリーン切り替えエフェクトの実装

ディスプレイのレンダリングは次のとおりです:

効果デモ ソースコードダウンロード

モバイル端末を使用する場合、タッチ スクリーン ジェスチャを使用して左右にスライドして、NetEase News などの APP 列を切り替えるなど、TAB 列を切り替えることができます。ここで言う TAB は、一般的にナビゲーション バーと、その TAB に対応するコンテンツで構成されます。ナビゲーション バーのラベルが切り替わると、それに応じてラベルに対応するコンテンツも切り替わります。この記事では、モバイル端末のTABタッチスクリーン切り替え効果を例に基づいて紹介します。

HTML

TAB ナビゲーション #pagenavi を用意します。これには、TAB ナビゲーションで切り替える 4 つのナビゲーション ボタンが含まれています。次に、スイッチのメイン コンテンツである #slider をナビゲーション ボタンに対応する 4 つ配置します。内容はカスタマイズされています。

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

もちろん、CSS スタイルを HTML に追加する必要もあります。この例では、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 を直接呼び出して、バインディング タブ、スライドの方向、速度、時間などの情報を設定してコンテンツの切り替えを実現します。詳細なコードを参照してください。

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

上記の内容がこの記事のすべてです。皆様の学習に役立つことを願っています。