cari

Rumah  >  Artikel  >  hujung hadapan web  >  Acara sentuh HTML5 menyedari kesan meluncurkan halaman ke atas dan ke bawah [dengan kod]_kemahiran tutorial HTML5

Acara sentuh HTML5 menyedari kesan meluncurkan halaman ke atas dan ke bawah [dengan kod]_kemahiran tutorial HTML5

WBOY
WBOYasal
2016-05-16 15:51:392286semak imbas

Acara sentuhan HTML5 menyedari kesan meluncurkan halaman ke atas dan ke bawah [dengan kod]

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >    
  2. <html lang="en" >    
  3. <kepala>    
  4. <meta charset="UTF- 8">    
  5. <meta nama="viewport"  kandungan="width=device-width,initial-scale=1 user-scalable=0" />    
  6. <tajuk>2014-4-29tajuk>    
  7. <gaya>    
  8. * {margin: 0; pelapik: 0;}    
  9. #luar{ lebar:90%; ketinggian: 490px; latar belakang: #000; margin: auto; limpahan: tersembunyi;}    
  10. #dalaman{lebar:80%; ketinggian: 2000px; latar belakang: #f67d42; margin: auto; jawatan:saudara; atas:0; }    
  11. gaya>    
  12. <skrip src='jquery- 1.9.1.min.js'>skrip>    
  13. kepala>    
  14. <badan>    
  15.   
  16. <div id="spText" >div>    
  17. <div id="luar" >    
  18. <div id="dalaman" >    
  19. 123<br> 123<br> gag<br> af <br> 123<br>  123<br> 123<br> 123<br> 123 <br> 123<br>  123<br> 123<br> 123<br> 123 <br> 123<br>  yryyr<br> ryry<br> 123<br> 123 <br> 123<br>  123<br> 123<br> sdff<br> fef <br> 123<br>  jam<br> hrh<br> 5t<br> 123 <br> er<br>  ert<br> 123<br> rgdgdg<br> 123 <br> 123<br>  123<br> 123<br> 123<br> 123 <br> gfgfgfgfgfgf<br<  sdsdsdsdsdsd<br> sf<br> 123<br>  123<br> 123<br> 123<br> 123 <br> 123<br>  123<br> 123<br> gdggdgdg<br> 123<br> drgdrgd<br>  123<br> 123<br> 123<br> yuyuyuyuyuy <br> hjkhjkhkhkhjkhkh<br>  kjkjk<br>123<br> 123<br> gag <br> af<br>  123<br> 123<br> 123<br> 123 <br> 123<br>  123<br> 123<br> 123<br> 123 <br> 123<br>  123<br> tahun<br> ryry<br> 123 <br> 123<br>  123<br> 123<br> 123<br> sdff <br> fef<br> 123<br> hr<br> hrh<br > 5t<br> 123< br> er<br> ert<br> 123<br > rgdgdg<br> 123<< br> 123<br> 123<br> 123<br > 123<br> 123< br> gfgfgfgfgfgf<br> <br> sf<br > 123<br> 123< br> 123<br> 123<br> 123<br > 123<br> 123< br> 123<br> <br> 123<br > drgdrgd<br> 123<>;< br> 123<br> 123<br> yuyuyuyuy<br > hjkhjkhkhkhjkhkh<br> kjkjk< br>    
  20. div>    
  21. div>    
    22.   
  23. <skrip>    
    24. var startX,//触摸时的坐标    
  25. startY, 
  26. x, //jarak gelongsor
  27. y,
  28. di atasY=0; //Tetapkan pembolehubah global untuk merekodkan kedudukan slaid blok dalaman terakhir
  30. var dalaman=dokumen.getElementById("dalaman");
    31. fungsi touchSatrt(e){//touch
    32. e.preventDefault();
    33. var
  33. sentuh=e.sentuhan[0]
  34. startY = sentuh.pageY; //Koordinat apabila baru disentuh
    35. }
    37. fungsi touchMove(e){//Slide
    38. e.preventDefault();
    39. var
  39. sentuh = e.sentuhan[0]
  40. y = sentuh.pageY - startY;//Jarak gelongsor
    41. //
  41. inner.style.webkitTransform = 'terjemah(' 0 'px, ' y 'px )'; //Anda juga boleh menggunakan kaedah css3
  42. inner.style.top=di atasY y "px"; //Dalam ayat ini  
    43. }
    45. fungsi touchEnd(e){//Jari meninggalkan skrin
    46. e.preventDefault();
  47. di atasY=parseInt(inner.style.top);//Rakam peluncur dalaman selepas sentuhan berakhir Kedudukan gelongsor dicerminkan dalam pembolehubah global dan mesti ditukar kepada integer menggunakan parseInt();
  48. }//
  49. document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);
    50. document.getElementById("luar").addEventListener('touchmove', touchMove,false);
  50. document.getElementById("outer").addEventListener('touchend', touchEnd,false);
    52. skrip
  52. >
    53.  
  53. badan>
    54.  
    55. html
  55. >
  56. Acara sentuhan html5 di atas menyedari kesan halaman meluncur ke atas dan ke bawah [dengan kod] adalah semua kandungan yang dikongsi oleh editor. Saya harap ia boleh memberi anda rujukan, dan saya harap anda akan menyokong Script Home.
    57. Teks asal:
  57. http://www.tuicool.com/articles/nIBJju
Kenyataan：
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
Artikel sebelumnya：Kemahiran tutorial standardization_html5 berstruktur semantik HTML5Artikel seterusnya：Kemahiran tutorial standardization_html5 berstruktur semantik HTML5

Artikel berkaitan

Lihat lagi