欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2023-12-15 12:48:34
下面小编就为大家带来一篇html5 touch事件实现页面上下滑动效果【附代码】。小编觉得挺不错的，现在分享给大家。一起过来看看吧，给大家一个参考... 16-03-10...

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

xml/html code复制内容到剪贴板
  1. <!doctype html>    
  2. <html lang="en">    
  3. <head>    
  4. <meta charset="utf-8">    
  5. <meta name="viewport" content="width=device-width,initial-scale=1 user-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. <script src='jquery-1.9.1.min.js'></script>    
  13. </head>    
  14. <body>    
  15.   
  16. <div id="sptext"></div>    
  17. <div id="outer">    
  18. <div id="inner">    
  19. 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>    
  20. </div>    
  21. </div>    
  22.   
  23. <script>    
  24. var startx,//触摸时的坐标    
  25. starty,    
  26. x, //滑动的距离    
  27. y,    
  28. abovey=0; //设一个全局变量记录上一次内部块滑动的位置    
  29.   
  30. var inner=document.getelementbyid("inner");    
  31. function touchsatrt(e){//触摸    
  32. e.preventdefault();    
  33. var touch=e.touches[0];    
  34. starty = touch.pagey; //刚触摸时的坐标    
  35. }    
  36.   
  37. function touchmove(e){//滑动    
  38. e.preventdefault();    
  39. var touch = e.touches[0];    
  40. y = touch.pagey - starty;//滑动的距离    
  41. //inner.style.webkittransform = 'translate(' + 0+ 'px, ' + y + 'px)'; //也可以用css3的方式    
  42. inner.style.top=abovey+y+"px"; //这一句中的    
  43. }    
  44.   
  45. function touchend(e){//手指离开屏幕    
  46. e.preventdefault();    
  47. abovey=parseint(inner.style.top);//touch结束后记录内部滑块滑动的位置 在全局变量中体现 一定要用parseint()将其转化为整数字;    
  48.   
  49. }//    
  50. document.getelementbyid("outer").addeventlistener('touchstart', touchsatrt,false);    
  51. document.getelementbyid("outer").addeventlistener('touchmove', touchmove,false);    
  52. document.getelementbyid("outer").addeventlistener('touchend', touchend,false);    
  53. </script>    
  54. </body>    
  55.   
  56. </html>  
  57.   

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

原文：http://www.tuicool.com/articles/nibjju

上一篇：

下一篇：

推荐阅读