Rumah > Artikel > hujung hadapan web > 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

WBOYasal: 2016-05-16 15:51:362252semak 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

>
<html lang="en" >
<kepala>
<meta charset="UTF- 8">
<meta nama="viewport" kandungan="width=device-width,initial-scale=1 user-scalable=0" />
<tajuk>2014-4-29tajuk>
<gaya>
* {margin: 0; pelapik: 0;}
#luar{ lebar:90%; ketinggian: 490px; latar belakang: #000; margin: auto; limpahan: tersembunyi;}
#dalaman{lebar:80%; ketinggian: 2000px; latar belakang: #f67d42; margin: auto; jawatan:saudara; atas:0; }
gaya>
<skrip src='jquery- 1.9.1.min.js'>skrip>
kepala>
<badan>
<div id="spText" >div>
<div id="luar" >
<div id="dalaman" >
123 123br> 123> >br> gag af 123 123 123 123 123 123 123 123 123 123 123 yryyr ryry 123 123 123 123 123 sdff fef 123 jam hrh 5t 123 er ert 123 rgdgdg 123 123 123 123 123 123 gfgfgfgfgfgf<br<🎜>< <🎜><🎜> sdsdsdsdsdsd<🎜><🎜><<🎜>br> sf 123 123 123 123 123 123 123 123 gdggdgdg<<<🎜 br> 123 123 123 123 yuyuyuyuyuy khjkhj 🎜> kjkjk 123 123< gag af 123 123 123 123 123 123 123 123 123 123 123 yryyr ryry 123 123 123 123 123 sdff fef 123 jam hrh 5t 123 er ert 123 rgdgdg<<<🎜 br> 123 123 123 123 123 123 gfgfgfgf 🎜> sdsdsdsdsdsd<brbr > sf 123 123 123 123 123 123 123 123 gdggdgdg 123 drgdrgd< 123 123 123 yuyuyuyuyuy hjkhjkhkhkhjkhkh> br> kjkjk >
div>
div>
<skrip>
var startX, //Menyelaras apabila disentuh
mula,
x, //jarak gelongsor
y,
di atasY=0; //Tetapkan pembolehubah global untuk merekodkan kedudukan slaid blok dalaman terakhir
var dalaman=dokumen.getElementById("dalaman");
fungsi touchSatrt(e){//touch
e.preventDefault();
var
=e.sentuh[0]; 🎜>
fungsi touchMove(e){//Slide e.preventDefault();
sentuh
e
=
.pageY - startY;//Jarak gelongsor //inner.style.webkitTransform =
0 'px, ' y 'px )'; //Anda juga boleh menggunakan css3 inner.style.top=
y "px"; //AboveY dalam ayat ini ialah The kedudukan dalaman selepas slaid terakhir }
fungsi touchEnd(e){//Jari meninggalkan skrin
e.preventDefault();
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();
}//
document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);
document.getElementById("outer").addEventListener('touchend', touchEnd,false);
>
badan>
>
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