Heim > Artikel > Web-Frontend > Das HTML5-Touch-Ereignis ermöglicht das Auf- und Abwärtsschieben der Touchscreen-Seite (1)_HTML5-Tutorial-Fähigkeiten

Das HTML5-Touch-Ereignis ermöglicht das Auf- und Abwärtsschieben der Touchscreen-Seite (1)_HTML5-Tutorial-Fähigkeiten

WBOYOriginal: 2016-05-16 15:51:362252Durchsuche

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 123 gag af 123 123 123 123 123 123 123 123 123 123 123 yryyr ryry 123 123 123 123 123 sdff fef 123 hrh hrh 5y 123 er ert 123 rgdgdg 123 123 123 123 123 123 gfgfgfgfgfgf sdsdsdsdsdsd sf 123 123 123 123 123 123 123 123 gdggdgdg 123 drgdrgd 123 123 123 yuyuyuyuyuy hjkhjkhkhkhjkhkh 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 hr hrh 5y 123 er ert 123 rgdgdg 123 123 123 123 123 123 gfgfgfgfgfgf sdsdsdsdsdsd sf 123 123 123 123 123 123 123 123 gdggdgdg 123 drgdrgd 123 123 123 yuyuyuyuyuy hjkhjkhkhkhjkhkh kjkjk
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
=e.touches[0]; 🎜>
Funktion touchMove(e){//Slide e.preventDefault();
touch
e
=
.pageY - startY;//Schiebestrecke //inner.style.webkitTransform =
0 'px, ' y 'px )'; //Sie können auch CSS3 verwenden inner.style.top=aboveY
}
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('touchend', touchEnd,false);
>
Körper>
>
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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Erste Schritte mit HTML5 Canvas (2) – Path_html5-Tutorial-FähigkeitenNächster Artikel：Erste Schritte mit HTML5 Canvas (2) – Path_html5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen