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

XML/HTML Code 复制内容到剪贴板 <!doctype html>     < html   lang = "en" >      < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width,initial-scale=1 user-scalable=0" />      < title > 2014-4-29 </ title >      < style >      * {margin: 0; padding: 0;}     #outer{ width:90%; height: 490px; background: #000; margin: auto; overflow: hidden;}     #inner{width:80%; height: 2000px; background: #f67d42; margin: auto; position:relative; top:0; }     </ style >      < script   src = 'jquery-1.9.1.min.js' > </ script >      </ head >      < body >         < div   id = "spText" > </ div >      < div   id = "outer" >      < div   id = "inner" >      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 >      </ div >      </ div >         < script >      var startX,//触摸时的坐标     startY,     x, //滑动的距离     y,     aboveY = 0 ; //设一个全局变量记录上一次内部块滑动的位置        var  inner = document .getElementById("inner");     function touchSatrt(e){//触摸     e.preventDefault();     var  touch = e .touches[0];     startY  =  touch .pageY; //刚触摸时的坐标     }        function touchMove(e){//滑动     e.preventDefault();     var  touch  =  e .touches[0];     y  =  touch .pageY - startY;//滑动的距离     // inner.style.webkitTransform  =  'translate('    0  'px, '   y   'px)'; //也可以用css3的方式     inner.style.top = aboveY y "px"; //这一句中的     }        function touchEnd(e){//手指离开屏幕     e.preventDefault();     aboveY = parseInt (inner.style.top);//touch结束后记录内部滑块滑动的位置 在全局变量中体现 一定要用parseInt()将其转化为整数字;        }//     document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);     document.getElementById("outer").addEventListener('touchmove', touchMove,false);     document.getElementById("outer").addEventListener('touchend', touchEnd,false);     </ script >      </ body >         </ html >      

以上这篇html5 touch事件实现页面上下滑动效果【附代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

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