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

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. html>  
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.         123br>        123br>        123> >br>    gagbr> af br> 123br>  123br> 123br> 123br> 123 br> 123br>  123br> 123br> 123br> 123 br> 123br>  yryyrbr> ryrybr> 123br> 123 br> 123br>  123br> 123br> sdffbr> fef br> 123br>  jambr> hrhbr> 5tbr> 123 br> erbr>  ertbr> 123br> rgdgdgbr> 123 br> 123br>  123br> 123br> 123br> 123 br> gfgfgfgfgfgfbr sdsdsdsdsdsdbr> sfbr> 123br> 123br > 123br> 123 br> 123br> 123br> 123br > 123br> gdggdgdgbr> 123br> br> 123br > 123br> 123 br> yuyuyuyuyuybr> khjkhj 🎜>br> kjkjkbr >123br>      123 br>    gagbr> afbr> 123br > 123br> 123 br> 123br> 123br> 123br > 123br> 123 br> 123br> 123br> 123br > yryyrbr> ryry br> 123br> 123br> 123br > 123br> 123 br> sdffbr> fefbr> 123br> jambr > hrhbr> 5t br> 123br> erbr> ertbr > 123br> rgdgdgbr> 123br> 123br> 123br > 123br> 123 br> 123br> gfgfgfgf 🎜>br> sdsdsdsdsdsdbrbr > sfbr> 123 br> 123br> 123br> 123br > 123br> 123 br> 123br> 123br> gdggdgdgbr > 123br> drgdrgd br> 123br> 123br> 123br > yuyuyuyuyuybr> hjkhjkhkhkhjkhkh> br> kjkjkbr>        >
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. fungsi touchSatrt(e){//touch
32. e.preventDefault();
33. var
sentuh
34. =e.sentuh[0];                                                                                                                                                                                                            🎜>                                                            
35. fungsi touchMove(e){//Slide e.preventDefault();
var
36. sentuh
=
37. e
.sentuhan[0];
38.  
y
39. =
sentuh
40. .pageY - startY;//Jarak gelongsor //inner.style.webkitTransform =
'terjemah('
41. 0 'px, ' y 'px )'; //Anda juga boleh menggunakan css3  inner.style.top=
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. 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);
document.getElementById("outer").addEventListener('touchmove', touchMove,false);
49. document.getElementById("outer").addEventListener('touchend', touchEnd,false);
skrip
51. >
52. badan>
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