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实现表单验证效果(非常不错)
Jan 18 HTML / CSS
CSS3中的5个有趣的新技术
Apr 02 HTML / CSS
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 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
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
python中类的一些方法分析
2014/09/25 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
临床医学专业学生的自我评价分享
2013/11/21 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
个人自我剖析材料
2014/09/30 职场文书
2015年服务员工作总结
2015/04/08 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers