html5 touch事件实现触屏页面上下滑动
导读:收集整理的这篇文章主要介绍了html5 touch事件实现触屏页面上下滑动,觉得挺不错的,现在分享给大家,也给大家做个参考。这篇文章主要为大家详细介绍了htML5 touch事件实现触屏页面上下滑动的相关代码,代码注释很清楚,感兴趣的小伙伴...
收集整理的这篇文章主要介绍了html5 touch事件实现触屏页面上下滑动,觉得挺不错的,现在分享给大家,也给大家做个参考。这篇文章主要为大家详细介绍了htML5 touch事件实现触屏页面上下滑动的相关代码,代码注释很清楚,感兴趣的小伙伴们可以参考一下最近做的做那个app的项目由于用Overflow:hidden导致了很多问题,于是决定研究下html5的touch事件。想找个全面点的帖子很难,虽然好多关于html5 touch的文章但大多都是介绍touch事件或者很简短的小demo。
比较全面的上下滑动的小demo,代码比较简单。
下面是完整代码,我把几个重要的地方做了红色标记
!doctyPE html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width,inITial-scale=1 user-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> script src='jquery-1.9.1.min.js'> /script> /head> body> p id="spText"> /p> p id="outer"> p id="inner"> 123br> 123br> gagbr> afbr> 123br> 123br> 123br> 123br> 123br> 123br> 123br> 123br> 123br> 123br> 123br> yryyrbr> ryrybr> 123br> 123br> 123br> 123br> 123br> sDFfbr> fefbr> 123br> hrbr> hrhbr> 5ybr> 123br> erbr> ertbr> 123br> rgdgdgbr> 123br> 123br> 123br> 123br> 123br> 123br> gfgfgfgfgfgfbr> sdsdsdsdsdsdbr> sfbr> 123br> 123br> 123br> 123br> 123br> 123br> 123br> 123br> gdggdgdgbr> 123br> drgdrgdbr> 123br> 123br> 123br> yuyuyuyuyuybr> hjkhjkhkhkhjkhkhbr> kjkjkbr> 123br> 123br> gagbr> afbr> 123br> 123br> 123br> 123br> 123br> 123br> 123br> 123br> 123br> 123br> 123br> yryyrbr> ryrybr> 123br> 123br> 123br> 123br> 123br> sdffbr> fefbr> 123br> hrbr> hrhbr> 5ybr> 123br> erbr> ertbr> 123br> rgdgdgbr> 123br> 123br> 123br> 123br> 123br> 123br> gfgfgfgfgfgfbr> sdsdsdsdsdsdbr> sfbr> 123br> 123br> 123br> 123br> 123br> 123br> 123br> 123br> gdggdgdgbr> 123br> drgdrgdbr> 123br> 123br> 123br> yuyuyuyuyuybr> hjkhjkhkhkhjkhkhbr> kjkjkbr> /p> /p> script> VAR startX,//触摸时的坐标 startY, x, //滑动的距离 y, aboveY=0; //设一个全局变量记录上一次内部块滑动的位置 var inner=document.getElementById("inner"); function touchSatrt(e){ //触摸 e.preventDefault(); var touch=e.touches[0]; startY = touch.pageY; //刚触摸时的坐标 } function touchMove(e){ //滑动 e.PReventDefault(); var touch = e.touches[0]; y = touch.pageY - startY; //滑动的距离 //inner.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)'; //也可以用css3的方式 inner.style.top=aboveY+y+"px"; //这一句中的aboveY是inner上次滑动后的位置 } function touchEnd(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>
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
html5和CSS 实现禁止IOS长按复制粘贴功能
HTML5和jQuery实现弹出创意搜索框层的方法
html5和css3以及jquery实现音乐播放器
以上就是html5 touch事件实现触屏页面上下滑动的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: html5 touch事件实现触屏页面上下滑动
本文地址: https://pptw.com/jishu/584260.html