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的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
Apr 27 HTML / CSS
css弧边选项卡的项目实践
May 07 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
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
DOM 基本方法
2009/07/18 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
Python中os.path用法分析
2015/01/15 Python
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
Django Highcharts制作图表
2016/08/27 Python
python使用fork实现守护进程的方法
2017/11/16 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
Python 修改列表中的元素方法
2018/06/26 Python
pygame实现简易飞机大战
2018/09/11 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
python对一个数向上取整的实例方法
2020/06/18 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
产假请假条
2014/04/10 职场文书
ktv筹备计划书
2014/05/03 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS
python中urllib包的网络请求教程
2022/04/19 Python
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS