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

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

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

XML/HTML Code复制内容到剪贴板
  1. <!doctypehtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <metaname="viewport"content="width=device-width,initial-scale=1user-scalable=0"/>
  6. <title>2014-4-29</title>
  7. <style>
  8. *{margin:0;padding:0;}
  9. #outer{width:90%;height:490px;background:#000;margin:auto;overflow:hidden;}
  10. #inner{width:80%;height:2000px;background:#f67d42;margin:auto;position:relative;top:0;}
  11. </style>
  12. <scriptsrc='jquery-1.9.1.min.js'></script>
  13. </head>
  14. <body>
  15. <divid="spText"></div>
  16. <divid="outer">
  17. <divid="inner">
  18. 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>
  19. </div>
  20. </div>
  21. <script>
  22. varstartX,//触摸时的坐标
  23. startY,
  24. x,//滑动的距离
  25. y,
  26. aboveY=0;//设一个全局变量记录上一次内部块滑动的位置
  27. varinner=document.getElementById("inner");
  28. functiontouchSatrt(e){//触摸
  29. e.preventDefault();
  30. vartouch=e.touches[0];
  31. startY=touch.pageY;//刚触摸时的坐标
  32. }
  33. functiontouchMove(e){//滑动
  34. e.preventDefault();
  35. vartouch=e.touches[0];
  36. y=touch.pageY-startY;//滑动的距离
  37. //inner.style.webkitTransform='translate('+0+'px,'+y+'px)';//也可以用css3的方式
  38. inner.style.top=aboveY+y+"px";//这一句中的
  39. }
  40. functiontouchEnd(e){//手指离开屏幕
  41. e.preventDefault();
  42. aboveY=parseInt(inner.style.top);//touch结束后记录内部滑块滑动的位置在全局变量中体现一定要用parseInt()将其转化为整数字;
  43. }//
  44. document.getElementById("outer").addEventListener('touchstart',touchSatrt,false);
  45. document.getElementById("outer").addEventListener('touchmove',touchMove,false);
  46. document.getElementById("outer").addEventListener('touchend',touchEnd,false);
  47. </script>
  48. </body>
  49. </html>

以上这篇html5 touch事件实现页面上下滑动效果【附代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

原文:http://www.tuicool.com/articles/nIBJju

标签: touch