主页 / 网站建设 /

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

网站建设 2021-07-02 23:00www.dzhlxh.cn网站建设

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事件实现页面上下滑动效果【附代码】就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。

原文：

上一篇：Html5 postMessage实现跨域消息传递 下一篇：html5 touch事件实现触屏页面上下滑动(二)

网站设计

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板