cari

Rumah >hujung hadapan web >Tutorial H5 >Acara sentuh html5 menyedari gelongsor ke atas dan ke bawah halaman skrin sentuh (1)_html5 kemahiran tutorial

Acara sentuh html5 menyedari gelongsor ke atas dan ke bawah halaman skrin sentuh (1)_html5 kemahiran tutorial

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

Projek apl baru-baru ini yang saya kerjakan menyebabkan banyak masalah disebabkan penggunaan limpahan: tersembunyi, jadi saya memutuskan untuk mengkaji peristiwa sentuhan HTML5. Sukar untuk mencari siaran yang komprehensif Walaupun terdapat banyak artikel tentang sentuhan html5, kebanyakannya memperkenalkan acara sentuh atau demo yang sangat singkat.
Demo kecil yang agak komprehensif untuk meluncur ke atas dan ke bawah, kodnya agak mudah.

Berikut ialah kod lengkap saya telah menandai beberapa tempat penting dengan warna merah

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>        123br>        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> <br> 123<br > 123<br> 123< br> yuyuyuyuyuy<br> khjkhj 🎜><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 > 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> gfgfgfgf 🎜><br> sdsdsdsdsdsd<brbr > 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>        >
  20.         div>  
  21.     div>  
  22.   
  23. <skrip>
  24. var startX, //Menyelaras apabila disentuh
  25. mula,
  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.                                           
  31. fungsi touchSatrt(e){//touch
  32. e.preventDefault();
  33. var
    34. sentuh
  34. =e.sentuh[0];                                                                                                                                                                                                            🎜>                                                            
  35. fungsi touchMove(e){//Slide e.preventDefault();
    36. var
  36. sentuh
    37. =
  37. e
    38. .sentuhan[0];
  38.  
    39. y
  39. =
    40. sentuh
  40. .pageY - startY;//Jarak gelongsor //inner.style.webkitTransform =
    41. 'terjemah('
  41. 0 'px, ' y 'px )'; //Anda juga boleh menggunakan css3  inner.style.top=
    42. di atasY
  42. y "px"; //AboveY dalam ayat ini ialah The kedudukan dalaman selepas slaid terakhir }             
  44. fungsi touchEnd(e){//Jari meninggalkan skrin
  45. e.preventDefault();
    46.  
  46. di atasY=parseInt(inner.style.top);//Rakam peluncur dalaman selepas sentuhan selesai Kedudukan gelongsor dicerminkan dalam pembolehubah global dan mesti ditukar kepada integer menggunakan parseInt();
  47. }//
  48. document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);
    49. document.getElementById("outer").addEventListener('touchmove', touchMove,false);
  49. document.getElementById("outer").addEventListener('touchend', touchEnd,false);
    51. skrip
  51. >
  52. badan>
    54. html
  54. >
  55. Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang. Teks asal: http://www.cnblogs.com/leinov/p/3701951.html
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：Bermula dengan HTML5 Canvas (2) - Kemahiran tutorial Path_html5Artikel seterusnya：Bermula dengan HTML5 Canvas (2) - Kemahiran tutorial Path_html5

Artikel berkaitan

Lihat lagi