html5 touch事件实现触屏页面上下滑动(一)
2014-04-30 18:27
639 查看
最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件。想找个全面点的帖子真是难死了,虽然好多关于html5 touch的文章但大多都是介绍touch事件或者很简短的小demo。
下午好生研究了下终于搞出了个比较全面的上下滑动的小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> <div id="spText"></div> <div id="outer"> <div id="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> 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>
相关文章推荐
- html5 touch事件实现触屏页面上下滑动(二)
- html5 touch事件实现触屏页面上下滑动(一)
- html5 touch事件实现页面上下滑动 - Leinov
- HTML5手机页面触屏滑动上下翻页特效
- 通过touch事件手写实现页面在移动端的触屏滚动功能
- 登陆注册页面实现上下滑动,方便输入
- js实现滑动触屏事件监听的方法
- Appium 1.7 实现上下、左右滑动页面方法
- 【html5构建触屏网站】之touch事件
- Axure8 实现移动端页面上下滑动效果
- Appium 测试,实现上下、左右滑动页面【Android,iOS 已验证】
- 移动端touch触屏滑动事件、滑动触屏事件监听!
- Android 实现item或页面上下滑动切换
- 移动端touch事件---利用bootstrap实现轮播图手指左右滑动事件
- Appium 测试,实现上下左右滑动页面
- Axure8.0 页面上下滑动效果实现
- 移动端touch事件实现页面弹动--小插件
- 移动端上下滑动事件之--坑爹的touch.js
- js实现移动HTML5页面滑动到最底部触发内容加载
- Axure8 实现移动端页面上下滑动效果