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


Posted in HTML / CSS onMarch 10, 2016

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事件实现页面上下滑动效果【附代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

原文:http://www.tuicool.com/articles/nIBJju

HTML / CSS 相关文章推荐
CSS3实现复选框动画特效示例代码
Sep 27 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
Jan 14 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 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
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 #HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 #HTML / CSS
You might like
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
Laravel下生成验证码的类
2017/11/15 PHP
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
Python进程间通信之共享内存详解
2017/10/30 Python
python中subprocess批量执行linux命令
2018/04/27 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
Python运算符+与+=的方法实例
2021/02/18 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
服装设计专业自荐书范文
2013/12/30 职场文书
公司运动会策划方案
2014/05/25 职场文书
班级心理活动总结
2014/07/04 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
Django Paginator分页器的使用示例
2021/06/23 Python