Implementierung des TAB-Touchscreen-Umschalteffekts für mobile Endgeräte basierend auf JavaScript_Javascript-Kenntnissen

Die Anzeigewiedergabe ist wie folgt:

Effektdemonstration Quellcode-Download

Wenn wir das mobile Endgerät verwenden, können wir mit Touchscreen-Gesten nach links und rechts wischen, um die TAB-Spalten zu wechseln, z. B. zwischen APP-Spalten wie NetEase News. Die Registerkarte, über die wir sprechen, besteht im Allgemeinen aus einer Navigationsleiste und dem der Registerkarte entsprechenden Inhalt. Wenn die Beschriftung in der Navigationsleiste geändert wird, ändert sich auch der der Beschriftung entsprechende Inhalt. In diesem Artikel stellen wir Ihnen anhand von Beispielen den TAB-Touchscreen-Umschalteffekt für mobile Endgeräte vor.

HTML

Wir bereiten ein TAB-Navigations-#pagenavi vor, das die vier Navigationsschaltflächen enthält, die in der TAB-Navigation umgeschaltet werden sollen, und dann sollte der Hauptinhalt des Umschalt-#sliders hier platziert werden, um den Navigationsschaltflächen zu entsprechen Der Inhalt wird individuell angepasst.

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

Natürlich müssen wir dem HTML auch CSS-Stile hinzufügen. In diesem Beispiel wurden die CSS-Dateien so gepackt, dass jeder sie herunterladen kann.

JAVASCRIPT

Da es sich um eine mobile Anwendung handelt, laden wir zepto.js. Zepto ist eine kleine JQuery. Dann müssen Sie das Touchscreen-Schiebe-Plug-in toucheslider.js laden.

<script type="text/javascript" src="js/zepto_min.js"></script> 
<script type="text/javascript" src="js/touchslider.js"></script>

Als nächstes rufen wir TouchSlider direkt auf, um den Inhaltswechsel zu erreichen, indem wir die Bindungslasche, die Schieberichtung, die Geschwindigkeit, die Zeit und andere Informationen festlegen. Bitte sehen Sie sich den detaillierten Code an:

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

Der obige Inhalt ist die gesamte Beschreibung dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich sein wird.