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

2020-03-24 18:20:13

字体：大中小

来源：转载

供稿：网友

最近做的做那个app的项目由于用overflow：hidden导致了很多问题，于是决定研究下html5的touch事件。想找个全面点的帖子很难，虽然好多关于html5 touch的文章但大多都是介绍touch事件或者很简短的小demo。
比较全面的上下滑动的小demo，代码比较简单。下面是完整代码，我把几个重要的地方做了红色标记XML/HTML Code复制内容到剪贴板
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 br 123 br gag br af br 123 br 123 br 123 br 123 br 123 br 123 br 123 br 123 br 123 br 123 br 123 br yryyr br ryry br 123 br 123 br 123 br 123 br 123 br sdff br fef br 123 br hr br hrh br 5y br 123 br er br ert br 123 br rgdgdg br 123 br 123 br 123 br 123 br 123 br 123 br gfgfgfgfgfgf br sdsdsdsdsdsd br sf br 123 br 123 br 123 br 123 br 123 br 123 br 123 br 123 br gdggdgdg br 123 br drgdrgd br 123 br 123 br 123 br yuyuyuyuyuy br hjkhjkhkhkhjkhkh br kjkjk br 123 br 123 br gag br af br 123 br 123 br 123 br 123 br 123 br 123 br 123 br 123 br 123 br 123 br 123 br yryyr br ryry br 123 br 123 br 123 br 123 br 123 br sdff br fef br 123 br hr br hrh br 5y br 123 br er br ert br 123 br rgdgdg br 123 br 123 br 123 br 123 br 123 br 123 br gfgfgfgfgfgf br sdsdsdsdsdsd br sf br 123 br 123 br 123 br 123 br 123 br 123 br 123 br 123 br gdggdgdg br 123 br drgdrgd br 123 br 123 br 123 br yuyuyuyuyuy br hjkhjkhkhkhjkhkh br kjkjk br /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
以上就是本文的全部内容，希望对大家的学习有所帮助。原文：http://www.cnblogs.com/leinov/p/3701951.htmlhtml教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：关于HTML音频的实例详解

下一篇：HTML5 canvas基本绘图之图形组合