Home > Article > Web Front-end > HTML5 touch event realizes the effect of sliding the page up and down [with code]_html5 tutorial skills

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

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

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5 semantic structured standardization_html5 tutorial skillsNext article：HTML5 semantic structured standardization_html5 tutorial skills

See more

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

Related articles