Das aktuelle App-Projekt, an dem ich gearbeitet habe, verursachte aufgrund der Verwendung von overflow:hidden viele Probleme, daher beschloss ich, das Touch-Event von HTML5 zu untersuchen. Es ist schwierig, einen umfassenden Beitrag zu HTML5 Touch zu finden, die meisten davon stellen Touch-Ereignisse oder sehr kurze Demos vor.
Eine relativ umfassende kleine Demo zum Auf- und Abgleiten, der Code ist relativ einfach.
Das Folgende ist der vollständige Code. Ich habe mehrere wichtige Stellen rot markiert
XML/HTML-CodeInhalt in die Zwischenablage kopieren
-
>
-
<html lang="en" >
-
<Kopf>
-
<meta charset="UTF- 8">
-
<meta name="viewport" Inhalt="width=device-width,initial-scale=1 user-scalable=0" />
-
<Titel>29.04.2014Titel>
-
<Stil>
-
* {margin: 0; padding: 0;}
-
#outer{ width:90%; Höhe: 490px; Hintergrund: #000; Rand: auto; Überlauf: versteckt;}
-
#inner{width:80%; Höhe: 2000px; Hintergrund: #f67d42; Rand: auto; Position:relativ; oben:0; }
-
Stil>
-
<script src='jquery- 1.9.1.min.js'>Skript>
-
Kopf>
-
<Körper>
-
-
<div id="spText" >div>
-
<div id="outer" >
-
<div id="inner" >
-
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> hrh<br> hrh<br> 5y<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 > yryyr<br> ryry< br> 123<br> 123<br> 123<br > 123<br> 123< br> sdff<br> fef<br> 123<br> hr<br > hrh<br> 5y< 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>
-
div>
-
div>
-
-
<Skript>
-
var startX, //Koordinaten bei Berührung
-
startY,
-
x, //Gleitweg
-
y,
-
aboveY=0; //Legen Sie eine globale Variable fest, um die Position der letzten internen Blockfolie aufzuzeichnen
-
-
var inner=document.getElementById("inner");
-
Funktion touchSatrt(e){//touch
-
e.preventDefault();
- var
touch-
=e.touches[0];
🎜>
-
Funktion touchMove(e){//Slide
e.preventDefault();
var - touch
= - e
.touches[0];
-
y- =
touch-
.pageY - startY;//Schiebestrecke
//inner.style.webkitTransform =
'translate('-
0 'px, ' y 'px )'; //Sie können auch CSS3 verwenden
inner.style.top=aboveY
y "px" //AboveY in diesem Satz ist The Position der Innenseite nach der letzten Folie
-
}
-
-
Funktion touchEnd(e){//Finger verlässt den Bildschirm
- e.preventDefault();
-
aboveY=parseInt(inner.style.top);//Den internen Schieberegler nach der Berührung aufzeichnen ist abgeschlossen. Die Schiebeposition wird in der globalen Variablen widergespiegelt und muss mit parseInt(); in eine Ganzzahl umgewandelt werden
-
}//
- document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);
document.getElementById("outer").addEventListener('touchmove', touchMove,false);
- document.getElementById("outer").addEventListener('touchend', touchEnd,false);
Skript- >
-
Körper>
-
html- >
-
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.
Originaltext: http://www.cnblogs.com/leinov/p/3701951.html