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 28 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
css3 media 响应式布局的简单实例
Aug 03 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 HTML / CSS
使用HTML5的File实现base64和图片的互转
Aug 01 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 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代码优化的53个细节
2014/03/03 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
PHP 8新特性简介
2020/08/18 PHP
IE中createElement需要注意的一个问题
2010/07/13 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
Javascript的this用法
2017/01/16 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
简单的Vue异步组件实例Demo
2017/12/27 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
django中的setting最佳配置小结
2017/11/21 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
用canvas显示验证码的实现
2020/04/10 HTML / CSS
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
办公室内勤工作职责
2013/12/11 职场文书
预备党员思想汇报
2014/01/08 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
幼儿园国庆节活动方案
2014/02/01 职场文书
学校就业推荐信范文
2014/05/19 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
Css预编语言及区别详解
2021/04/25 HTML / CSS
python用tkinter开发的扫雷游戏
2021/06/01 Python