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代码绘制可爱的Hello Kitty猫
Aug 03 HTML / CSS
css3发光搜索表单分享
Apr 11 HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 HTML / CSS
css3应用示例:新增的选择器
Mar 16 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的curl封装类用法实例
2014/11/07 PHP
jQuery的一些注意
2006/12/06 Javascript
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
python的即时标记项目练习笔记
2014/09/18 Python
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
python使用Matplotlib画饼图
2018/09/25 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
中专生职业生涯规划书范文
2013/12/29 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
学习党章心得体会2016
2016/01/15 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android