terminal mudah alih jquery TAB skrin sentuh menukar effect_jquery

WBOY
Lepaskan: 2016-05-16 15:34:51
asal
1661 orang telah melayarinya

Apabila kami menggunakan terminal mudah alih, kami boleh menggunakan gerak isyarat skrin sentuh untuk meluncur ke kiri dan kanan untuk menukar lajur TAB, seperti bertukar antara lajur APP seperti NetEase News. TAB yang kita bicarakan secara amnya terdiri daripada bar navigasi dan kandungan yang sepadan dengan TAB Apabila label pada bar navigasi ditukar, kandungan yang sepadan dengan label juga akan bertukar dengan sewajarnya. Artikel ini akan memperkenalkan anda kepada kesan penukaran skrin sentuh TAB terminal mudah alih berdasarkan contoh.

Kami menyediakan navigasi TAB #pagenavi, yang mengandungi empat butang navigasi untuk ditukar dalam navigasi TAB, dan kemudian kandungan utama suis #slider Empat li harus diletakkan di sini untuk sepadan dengan butang navigasi, dan kandungannya disesuaikan.

<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>
Salin selepas log masuk

Sudah tentu, kita juga perlu menambah gaya css pada HTML Ini harus ditetapkan mengikut tabiat dan hobi kita sendiri.

Memandangkan ia adalah aplikasi mudah alih, kami memuatkan zepto.js, zepto ialah jquery dengan saiz yang kecil. Kemudian anda perlu memuatkan pemalam gelongsor skrin sentuh toucheslider.js .

<script type="text/javascript" src="js/zepto_min.js"></script> 
<script type="text/javascript" src="js/touchslider.js"></script>
Salin selepas log masuk

Seterusnya kami akan terus memanggil TouchSlider untuk mencapai penukaran kandungan dengan menetapkan tab pengikat, arah gelongsor, kelajuan, masa dan maklumat lain Sila lihat kod terperinci:

<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>
Salin selepas log masuk

Di atas ialah kod utama tentang kesan penukaran skrin sentuh TAB pada terminal mudah alih.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan