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

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

WBOY

Freigeben： 2016-05-16 15:51:39

Original

2297 Leute haben es durchsucht

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