HTML5 touch event realizes the effect of sliding the page up and down [with code]

HTML5 touch event realizes the effect of sliding the page up and down [with code]_html5 tutorial skills

WBOY

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

Original

2298 people have browsed it

html5 touch event realizes the effect of sliding the page up and down [with code]

XML/HTML CodeCopy content to clipboard

>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>
<title>2014-4-29title>
<style>
* {margin: 0; padding: 0;}
#outer{ width:90%; height: 490px; background: #000; margin: auto; overflow: hidden;}
#inner{width:80%; height: 2000px; background: #f67d42; margin: auto; position:relative; top:0; }
style>
<script src='jquery-1.9.1.min.js'>script>
head>
<body>
<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 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 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>
<script>
var startX,//触摸时的坐标
startY,
x, //sliding distance
y,
aboveY=0; //Set a global variable to record the position of the last internal block slide
var inner=document.getElementById("inner");
function touchSatrt(e){//touch
e.preventDefault();
var touch=e.touches[0];
startY = touch.pageY; //Coordinates when just touched
}
function touchMove(e){//Slide
e.preventDefault();
var touch = e.touches[0];
y = touch.pageY - startY;//Sliding distance
//inner.style.webkitTransform = 'translate(' 0 'px, ' y 'px )'; //You can also use css3 method
inner.style.top=aboveY y "px"; //In this sentence
}
function touchEnd(e){//Finger leaves the screen
e.preventDefault();
aboveY=parseInt(inner.style.top);//Record the internal slider after the touch ends The sliding position is reflected in the global variable and must be converted into an integer using parseInt();
}//
document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);
document.getElementById("outer").addEventListener('touchmove', touchMove,false);
document.getElementById("outer").addEventListener('touchend', touchEnd,false);
script>
body>
html>

The above html5 touch event realizes the page sliding up and down effect [with code] is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.

Original text: http://www.tuicool.com/articles/nIBJju