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

2020-03-24 17:18:02

字体：大中小

来源：转载

供稿：网友

metacharset= UTF-8 metaname= viewport content= width=device-width,initial-scale=1user-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 scriptsrc='html' target='_blank'>jquery-1.9.1.min.js' /script /head body divid= spText /div divid= outer divid= 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 varstartX,//触摸时的坐标 startY, x,//滑动的距离 y, aboveY=0;//设一个全局变量记录上一次内部块滑动的位置 varinner=document.getElementById( inner functiontouchSatrt(e){//触摸 e.preventDefault(); vartouch=e.touches[0]; startY=touch.pageY;//刚触摸时的坐标 } functiontouchMove(e){//滑动 e.preventDefault(); vartouch=e.touches[0]; y=touch.pageY-startY;//滑动的距离 //inner.style.webkitTransform='translate('+0+'px,'+y+'px)';//也可以用css3的方式 inner.style.top=aboveY+y+ px //这一句中的 } functiontouchEnd(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事件实现页面上下滑动效果【附代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。原文：http://www.tuicool.com/articles/nIBJjuhtml教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：制作编写HTML邮件的编写原则

下一篇：HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用