爱易网
IT新闻
IT新闻
爱易资讯
网站搭建
云虚拟主机教程
云服务器教程
Apache教程
IIS教程
Nginx教程
网站策划
站长文章
推广教程
淘宝客教程
网页设计
HTML教程
XHTML教程
CSS教程
HTML5教程
CSS3教程
JavaSript基础
JQuery教程
Node.js教程
前端技术
Ajax教程
Js特效
Xml教程
平面设计
页面UI设计
photoshop教程
程序开发
AI人工智能
Asp教程
Php教程
Asp.Net教程
Net Core教程
C#教程
Java教程
Jsp教程
开发技术
微信小程序教程
Uniapp开发教程
微信公众号开发
Andriod教程
IOS教程
DOS教程
Python教程
Docker教程
Windows Container教程
数据库
MSSQL教程
MySQL教程
Redis教程
Access教程
Oracle教程
数据库教程
操作系统
Linux教程
Windows教程
MAC教程
Cisco教程
交换机教程
防火墙教程
搜索
爱易网页
JavaSript
javascript兑现手机触摸屏左右（上下）滚动（javascript感知滑屏方向）
javascript兑现手机触摸屏左右（上下）滚动（javascript感知滑屏方向）
日期：2014-05-16 浏览次数：20584 次
javascript实现手机触摸屏左右（上下）滚动（javascript感知滑屏方向）
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="target-densitydpi=medium-dpi, width=device-width, height=device-height, initial-scale=1" /> <title></title> <style type="text/css"> *{ margin:0; padding:0;} body{border:1px solid #066} .b{ width:1000px; height:77px} .b div{width:98px; height:75px; word-wrap:break-word; word-break:break-all; float:left; border:1px solid #096; overflow:scroll} </style> </head> <body leftmargin="4" rightmargin="4" onswipe="g('dbg1').innerHTML='swipe b'" onswipeleft="g('dbg2').innerHTML='left b'" onswiperight="g('dbg2').innerHTML='right b'"> swipe swipeleft swiperight <div id="div1" style="width:300px; overflow:hidden; height:77px; margin:0 auto" onswipe="g('dbg1').innerHTML='swipe'" onswipeleft="g('dbg2').innerHTML='left'" onswiperight="g('dbg2').innerHTML='right'"> <div style="word-break:break-all" class="b"> <div id="dbg1"> 1</div> <div id="dbg2"> 2</div> <div id="dbg3"> 3</div> <div id="dbg4"> 4</div> <div id="dbg5"> 5</div> <div id="dbg6"> 6</div> <div> 7</div> <div> 8</div> <div> 9</div> <div> 0</div> </div> </div> <div id="dbg">dbg</div> <script language="javascript"> function printEvent(evt) { try { var tmp = ''; for(var i in evt) { tmp += i+':' var v = evt[i]+''; if(v=='[object HTMLDivElement]') { tmp+=' <b>div</b> - '+evt[i].id+'<br/>'; } else if(''+(evt[i])=='[object TouchList]') { tmp+=' <br/> <b>touchlist</b>:<div style="border:1px solid red; margin:1px"> '; for(var x in evt[i]) { if(''+(evt[i][x])=='[object Touch]') { tmp+='<br> ----'+x+':'+' <b>Touch</b><br/><div style="border:1px solid blue;margin:1px">'; for(var y in evt[i][x]) { if(evt[i][x][y]=='[object HTMLDivElement]') { tmp+=' ----'+y+':<b>div</b> - '+evt[i][x][y].id+'<br/>'; }else tmp+='<br> ----'+y+':'+evt[i][x][y]+'<br/>'; } tmp+='</div>'; }else tmp+='<br> '+x+':'+evt[i][x]+'<br/>'; } tmp+='</div>'; }else if(typeof(evt[i])=='number'){ tmp+='<font color="green">'+v+'</font><br/>'; } else tmp+=''+v+'<br/>'; } return tmp; }catch(e){ alert(e) } } function g(id) { return document.getElementById(id); } var swiping = false; var step = 16; function slowmv(pid,v,v1) { try{ var moved = arguments.length==4?arguments[3]:0; if(moved+step>v) var _step = v-moved; else var _step = step; moved+=_step; var obj = g(pid); var display_width = obj.style.width?parseInt(obj.style.width,10):0; var new_left = obj.scrollLeft+_step*v1; if((v1>0&&new_left+display_width>=obj.scrollWidth)||(v1<0&&new_left<=0)) new_left = new_left<=0?0:(obj.scrollWidth-display_width); obj.scrollLeft = new_left; if(moved<v) { if(new_left>=obj.scrollWidth-display_width||new_left<=0){ swiping = false; return; } setTimeout(function(){slowmv(pid,v,v1,moved);},25) }else swiping = false; g('dbg').innerHTML = g('dbg').innerHTML + '<br>new_left=' <div class="clearfix"></div> </div> <nav aria-label="..."> <ul class="pager"> <li class="previous"><a href="39072">上一篇： ssh如何知道删除实体成不成功 </a></li> <li class="next"><a href="28223">下一篇： 十分简单的兼容多浏览器Javascript实现分页功能 </a></li> </ul> </nav> <div class="alert alert-warning" role="alert"> <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。 </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">相关资料<span><a target="_blank" class="pull-right" href="/javasript/">更多></a></span></h3> </div> <div class="panel-body row"> <ol> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/10266' title=' JS统制文本框textarea输入字数限制 ' target="_blank"> JS统制文本框textarea输入字数限制 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/21773' title=' js在线编辑器其中一个下传图片功能 ' target="_blank"> js在线编辑器其中一个下传图片功能 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/37813' title=' 关于click的有关问题 ' target="_blank"> 关于click的有关问题 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/14043' title=' extjs 带有验证码的登陆窗口 ' target="_blank"> extjs 带有验证码的登陆窗口 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/28440' title=' javascript入门（1） ' target="_blank"> javascript入门（1） </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/23725' title=' IE与Firefox在JavaScript下的7个不同句法 ' target="_blank"> IE与Firefox在JavaScript下的7个不同句法 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/6788' title=' jquery 判断输入长度解决办法 ' target="_blank"> jquery 判断输入长度解决办法 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/16859' title=' JSON用法引见 ' target="_blank"> JSON用法引见 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/24892' title=' Json字符串跟Json对象的相互转换以及Json的访问 ' target="_blank"> Json字符串跟Json对象的相互转换以及Json的访问 </a></li></div> </ol> </div> </div> </div> <div class="col-lg-4 hidden-sm hidden-xs"> <!--右边的内容--> <a id="AdPageRight1_AdPageRight" href="http://www.tdyun.com/make/?aiyiweb" target="_blank"><img class="img-responsive" src="/images/TdPageAd/oneweb.png" alt="网站建设一条龙 做网站 网站制作 网站定制 企业网站设计 特价" /></a> <script src='/Scripts/AdContentPage300_1.js' language='javascript'></script> <script src='/Scripts/AdContentPage300_2.js' language='javascript'></script> <script src='/Scripts/AdContentPage300_3.js' language='javascript'></script> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">推荐阅读<span><a target="_blank" class="pull-right" href="/javasript/">更多></a></span></h3> </div> <div class="panel-body"> <ol> <li class="articleAbout"><a href=/javasript/18963 title=' 使用超链接上载txt，但却直接打开了 ' target="_blank"> 使用超链接上载txt，但却直接打开了 </a></li> <li class="articleAbout"><a href=/javasript/11187 title=' 怎么用JQ控制頁面自適應 ' target="_blank"> 怎么用JQ控制頁面自適應 </a></li> <li class="articleAbout"><a href=/javasript/29411 title=' 网页右上角固定位置的Js悬浮窗口代码 ' target="_blank"> 网页右上角固定位置的Js悬浮窗口代码 </a></li> <li class="articleAbout"><a href=/javasript/30996 title=' 一张表单用到多个带提示的输入框该如何做 ' target="_blank"> 一张表单用到多个带提示的输入框该如何做 </a></li> <li class="articleAbout"><a href=/javasript/8112 title=' Json资料可以简单处理了，用这个就行 ' target="_blank"> Json资料可以简单处理了，用这个就行 </a></li> <li class="articleAbout"><a href=/javasript/14689 title=' javascript 的1点总结 ' target="_blank"> javascript 的1点总结 </a></li> <li class="articleAbout"><a href=/javasript/13509 title=' javascript的键盘统制事件 ' target="_blank"> javascript的键盘统制事件 </a></li> <li class="articleAbout"><a href=/javasript/26190 title=' JavaScript1.6新特性系列之forEach(通译) ' target="_blank"> JavaScript1.6新特性系列之forEach(通译) </a></li> <li class="articleAbout"><a href=/javasript/13417 title=' JavaScript中字符串转化成数目字及小数四舍五入保留几位法 ' target="_blank"> JavaScript中字符串转化成数目字及小数四舍五入保留几位法 </a></li> <li class="articleAbout"><a href=/javasript/24595 title=' 21世纪普普通通高等教育应用型规划教材·计算机系列：JSP网络程序设计 ' target="_blank"> 21世纪普普通通高等教育应用型规划教材·计算机系列：JSP网络程序设计 </a></li> <li class="articleAbout"><a href=/javasript/1244 title=' JS实现页面间数据传输解决方法 ' target="_blank"> JS实现页面间数据传输解决方法 </a></li> <li class="articleAbout"><a href=/javasript/34018 title=' 用mootools怎样做数字的渐变呢~解决思路 ' target="_blank"> 用mootools怎样做数字的渐变呢~解决思路 </a></li> <li class="articleAbout"><a href=/javasript/38870 title=' 页面关闭提示解决方案 ' target="_blank"> 页面关闭提示解决方案 </a></li> <li class="articleAbout"><a href=/javasript/27389 title=' 利用JS进行重新排序输出的有关问题 ' target="_blank"> 利用JS进行重新排序输出的有关问题 </a></li> <li class="articleAbout"><a href=/javasript/25813 title=' Eclipse rcp/rap 开发经验总结(15) -rap怎么使用js ' target="_blank"> Eclipse rcp/rap 开发经验总结(15) -rap怎么使用js </a></li> <li class="articleAbout"><a href=/javasript/23993 title=' extjs grid的Ext.grid.CheckboxSelectionModel默认选中解决办法 ' target="_blank"> extjs grid的Ext.grid.CheckboxSelectionModel默认选中解决办法 </a></li> <li class="articleAbout"><a href=/javasript/36915 title=' 小弟我怎样判断用户关闭了js功能？ ' target="_blank"> 小弟我怎样判断用户关闭了js功能？ </a></li> <li class="articleAbout"><a href=/javasript/22604 title=' jquery.boxy.js跟tinymce结合使用 出了bug ' target="_blank"> jquery.boxy.js跟tinymce结合使用 出了bug </a></li> <li class="articleAbout"><a href=/javasript/7264 title=' json格式输出,该怎么解决 ' target="_blank"> json格式输出,该怎么解决 </a></li> <li class="articleAbout"><a href=/javasript/32698 title=' ckeditor 上传本地图片 如何做？ ' target="_blank"> ckeditor 上传本地图片 如何做？ </a></li> </ol> </div> </div> </div> </div> <div class="clearfix"></div> <footer class=" footer navbar-bottom"> <em>友情链接：</em> <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a> <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a> <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a> <br /> <script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script> Copyright © 2013-2025 爱易网页 当前在线：178人 网站在4时44分20秒内访问总人数：58074人 当前 21.14% <a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script> </footer> </div> </body> </html>