热搜：编程 Python Microsoft 编程语言 C++

html5 touch事件如何实现触屏页面上下滑动(一)

发布时间：2023-05-23 18:10:22 来源：网络

.

再看那柔弱的柳树吧，在寒冬余威尚盛时节，就早早苏醒过来，望着冰冻的河面，迎着凛冽的寒风，它微微察觉出一丝春意，于是，不顾一切地率先吐翠，淡淡地披起娇黄嫩绿的新装。沿河望去，枝梢间烟纱雾彀，一片生机，这情景仿佛一首动人的歌，一首热烈向往春天的歌，一首报告春的信息的歌，一首表达美好信念的歌。我在想：既然迎春花被人称作报春花，那么，柳树可不可以叫作报春树呢春来了，万千柳枝在春风中袅袅舞动。柳树是热爱春天的，春天也是热爱柳树的。

最近做的做那个app的项目由于用overflow：hidden导致了很多问题，于是决定研究下html5的touch事件。想找个全面点的帖子很难，虽然好多关于html5 touch的文章但大多都是介绍touch事件或者很简短的小demo。
比较全面的上下滑动的小demo，代码比较简单。

下面是完整代码，我把几个重要的地方做了红色标记

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";//这一句中的aboveY是inner上次滑动后的位置
}
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>