Heim > Artikel > Web-Frontend > Das HTML5-Touch-Ereignis realisiert den Effekt des Hoch- und Runterschiebens der Seite [mit Code]_html5-Tutorial-Fähigkeiten

Das HTML5-Touch-Ereignis realisiert den Effekt des Hoch- und Runterschiebens der Seite [mit Code]_html5-Tutorial-Fähigkeiten

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

HTML5-Touch-Ereignis realisiert den Effekt des Hoch- und Runterschiebens der Seite [mit Code]

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>2014-4-29Titel>
<Stil>
* {margin: 0; Polsterung: 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,//触摸时的坐标
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");
touch=e.touches[0];
= touch.pageY; //Koordinaten, wenn gerade berührt }
Funktion touchMove(e){//Slide
e.preventDefault();
var
= e.touches[0]; y
touch.pageY - startY;//Gleitweg //inner.style.webkitTransform
'translate(' 0 'px, ' y 'px )'; //Sie können auch die CSS3-Methode verwenden inner.style.top
aboveY y "px"; //In diesem Satz }
aboveY
parseInt(inner.style.top);// Den internen Schieberegler nach der Berührung aufzeichnen endet Die Gleitposition spiegelt sich in der globalen Variablen wider 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>
html>
Das obige HTML5-Touch-Ereignis erkennt, dass der Effekt des Hoch- und Runterschiebens der Seite [mit Code] der gesamte vom Herausgeber geteilte Inhalt ist. Ich hoffe, dass es Ihnen eine Referenz geben kann, und ich hoffe, dass Sie Script Home unterstützen. Originaltext: http://www.tuicool.com/articles/nIBJju

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：Tutorial-Fähigkeiten zur semantisch strukturierten HTML5-Standardisierung_HTML5Nächster Artikel：Tutorial-Fähigkeiten zur semantisch strukturierten HTML5-Standardisierung_HTML5

In Verbindung stehende Artikel

Mehr sehen