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编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 HTML / CSS
Css预编语言及区别详解
Apr 25 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 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
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
php排序算法实例分析
2016/10/17 PHP
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
几种响应式文字详解
2017/05/19 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
Python获取服务器信息的最简单实现方法
2015/03/05 Python
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
Python解析nginx日志文件
2015/05/11 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
大专生简历的自我评价
2013/11/26 职场文书
教研活动总结
2014/04/28 职场文书
先进个人总结范文
2015/02/15 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
红楼梦读书笔记
2015/06/25 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android