html5 touch事件实现触屏页面上下滑动(一)


Posted in HTML / CSS onMarch 10, 2016

最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件。想找个全面点的帖子很难,虽然好多关于html5 touch的文章但大多都是介绍touch事件或者很简短的小demo。
比较全面的上下滑动的小demo,代码比较简单。

下面是完整代码,我把几个重要的地方做了红色标记

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.             
  32.             function touchSatrt(e){//触摸   
  33.                 e.preventDefault();   
  34.                 var touch=e.touches[0];   
  35.                 startY = touch.pageY;   //刚触摸时的坐标                 
  36.             }   
  37.   
  38.             function touchMove(e){//滑动             
  39.                  e.preventDefault();           
  40.                  var  touch = e.touches[0];                  
  41.                  y = touch.pageY - startY;//滑动的距离   
  42.                 //inner.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)';  //也可以用css3的方式        
  43.                 inner.style.top=aboveY+y+"px"; //这一句中的aboveY是inner上次滑动后的位置                      
  44.             }     
  45.   
  46.             function touchEnd(e){//手指离开屏幕   
  47.               e.preventDefault();                      
  48.               aboveY=parseInt(inner.style.top);//touch结束后记录内部滑块滑动的位置 在全局变量中体现 一定要用parseInt()将其转化为整数字;   
  49.   
  50.             }//   
  51.              document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);     
  52.              document.getElementById("outer").addEventListener('touchmove', touchMove,false);     
  53.              document.getElementById("outer").addEventListener('touchend', touchEnd,false);     
  54.     </script>  
  55. </body>  
  56.   
  57. </html>  

以上就是本文的全部内容,希望对大家的学习有所帮助。

原文:http://www.cnblogs.com/leinov/p/3701951.html

HTML / CSS 相关文章推荐
详解使用CSS3的@media来编写响应式的页面
Nov 01 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
在html页面中取得session中的值的方法
Aug 11 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 #HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 #HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 #HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 #HTML / CSS
HTML5如何实现元素拖拽
Mar 11 #HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 #HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 #HTML / CSS
You might like
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
Python中的localtime()方法使用详解
2015/05/22 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
Python绘制3D图形
2018/05/03 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
python实现桌面气泡提示功能
2019/07/29 Python
Python中的全局变量如何理解
2020/06/04 Python
Python下载的11种姿势(小结)
2020/11/18 Python
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
市三好学生主要事迹
2014/01/28 职场文书
学生自我评价范文
2014/02/02 职场文书
利用python调用摄像头的实例分析
2021/06/07 Python
5行Python代码实现一键批量扣图
2021/06/29 Python