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 相关文章推荐
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
Aug 28 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 HTML / CSS
html5启动原生APP总结
Jul 03 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 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
删除无限级目录与文件代码共享
2006/07/12 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
使用python实现baidu hi自动登录的代码
2013/02/10 Python
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
Python数据类型详解(二)列表
2016/05/08 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
模范家庭事迹材料
2014/02/10 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
学生个人评语大全
2015/01/04 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
酒店宣传语大全
2015/07/13 职场文书
小学教代会开幕词
2016/03/04 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers