html5 touch事件如何实现页面上下滑动效果【附代码】

发布时间：2023-01-16 03:56:58 来源：互联网

.

泰山日出天色略显昏暗，放眼望去，寂寥晨星下面是一片静止的山势般起伏的云海，在茫茫的夜色下，象极了远处同样黑魆魆的山峰。

html5 touch事件实现页面上下滑动效果【附代码】

XML/HTML Code复制内容到剪贴板

<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1user-scalable=0"/>
<title>2014-4-29</title>
<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>
<scriptsrc='jquery-1.9.1.min.js'></script>
</head>
<body>
<divid="spText"></div>
<divid="outer">
<divid="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>
varstartX,//触摸时的坐标
startY,
x,//滑动的距离
y,
aboveY=0;//设一个全局变量记录上一次内部块滑动的位置
varinner=document.getElementById("inner");
functiontouchSatrt(e){//触摸
e.preventDefault();
vartouch=e.touches[0];
startY=touch.pageY;//刚触摸时的坐标
}
functiontouchMove(e){//滑动
e.preventDefault();
vartouch=e.touches[0];
y=touch.pageY-startY;//滑动的距离
//inner.style.webkitTransform='translate('+0+'px,'+y+'px)';//也可以用css3的方式
inner.style.top=aboveY+y+"px";//这一句中的
}
functiontouchEnd(e){//手指离开屏幕
e.preventDefault();
aboveY=parseInt(inner.style.top);//touch结束后记录内部滑块滑动的位置在全局变量中体现一定要用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>