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 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 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模拟用户登陆的代码
2010/09/10 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
javascript URL编码和解码使用说明
2010/04/12 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
js中DOM三级列表(代码分享)
2017/03/20 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
使用python存储网页上的图片实例
2018/05/22 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
应届生自我鉴定
2013/12/11 职场文书
银行办理业务介绍信
2014/01/18 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
地理教师岗位职责
2014/03/16 职场文书
软件项目开发计划书
2014/05/01 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
vue中data里面的数据相互使用方式
2022/06/05 Vue.js