爱易网
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 浏览次数：20565 次
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/8552' title=' 高分求浏览器兼容性,该怎么处理 ' target="_blank"> 高分求浏览器兼容性,该怎么处理 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/17343' title=' 许久没写JSP的后果 ' target="_blank"> 许久没写JSP的后果 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/35629' title=' 把某月的日期（包括星期）给表示出来。该如何解决 ' target="_blank"> 把某月的日期（包括星期）给表示出来。该如何解决 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/9105' title=' jQueryValidateEngine.js关于checkbox异常提示 ' target="_blank"> jQueryValidateEngine.js关于checkbox异常提示 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/36257' title=' ，利用javascript怎么遍历注册表的目录？ ' target="_blank"> ，利用javascript怎么遍历注册表的目录？ </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/7231' title=' 又论Session，现在最新的同一类型浏览器，是不是真的只能共享一个Session了 ' target="_blank"> 又论Session，现在最新的同一类型浏览器，是不是真的只能共享一个Session了 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/13289' title=' JSP中动态INCLUDE与静态INCLUDE的差别 ' target="_blank"> JSP中动态INCLUDE与静态INCLUDE的差别 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/17546' title=' JS多种奇效 可运行 附代码 值得收藏 ' target="_blank"> JS多种奇效 可运行 附代码 值得收藏 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/19898' title=' jQuery autocomplete 处置json 返回值形式的demo ' target="_blank"> jQuery autocomplete 处置json 返回值形式的demo </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/host/?aiyiweb" target="_blank"><img class="img-responsive" src="/images/TdPageAd/hostTest15day.png" alt="香港全能空间 免费试用15天香港高速云虚拟主机PHP/ASP/NET送MSSQL和MYSQL" /></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/9618 title=' extjs checkbox 动态设立BoxLabel 以及 选中状态 ' target="_blank"> extjs checkbox 动态设立BoxLabel 以及 选中状态 </a></li> <li class="articleAbout"><a href=/javasript/4622 title=' 在JavaScript的数组中开展数组元素查找和替换(JS的indexOf等) ' target="_blank"> 在JavaScript的数组中开展数组元素查找和替换(JS的indexOf等) </a></li> <li class="articleAbout"><a href=/javasript/26851 title=' jsp页面施用Cookie-总结 ' target="_blank"> jsp页面施用Cookie-总结 </a></li> <li class="articleAbout"><a href=/javasript/5394 title=' javascript语言精髓读书笔记——第四章函数（一） ' target="_blank"> javascript语言精髓读书笔记——第四章函数（一） </a></li> <li class="articleAbout"><a href=/javasript/31122 title=' jsp跳转到其它页面的同时怎么传递参数 ' target="_blank"> jsp跳转到其它页面的同时怎么传递参数 </a></li> <li class="articleAbout"><a href=/javasript/12298 title=' 在前端开发中运用javascript模板引擎 - 事半功倍 ' target="_blank"> 在前端开发中运用javascript模板引擎 - 事半功倍 </a></li> <li class="articleAbout"><a href=/javasript/18716 title=' JSTL两列展示 ' target="_blank"> JSTL两列展示 </a></li> <li class="articleAbout"><a href=/javasript/19014 title=' 在面板外点击封锁面板 ' target="_blank"> 在面板外点击封锁面板 </a></li> <li class="articleAbout"><a href=/javasript/16032 title=' 关于javascript prototype的一些详细有关问题（摘自网络） ' target="_blank"> 关于javascript prototype的一些详细有关问题（摘自网络） </a></li> <li class="articleAbout"><a href=/javasript/23693 title=' 深入显出 jsp and servlet 第二版 读书笔记 ' target="_blank"> 深入显出 jsp and servlet 第二版 读书笔记 </a></li> <li class="articleAbout"><a href=/javasript/33550 title=' 请问一个关于javascript的有关问题 ' target="_blank"> 请问一个关于javascript的有关问题 </a></li> <li class="articleAbout"><a href=/javasript/38068 title=' html help workshop 怎么制作web帮助 ' target="_blank"> html help workshop 怎么制作web帮助 </a></li> <li class="articleAbout"><a href=/javasript/7384 title=' Javascript怎么替换换行符 ' target="_blank"> Javascript怎么替换换行符 </a></li> <li class="articleAbout"><a href=/javasript/21629 title=' 在页面其余区域点击的时候 顶层的select框自动消失 ' target="_blank"> 在页面其余区域点击的时候 顶层的select框自动消失 </a></li> <li class="articleAbout"><a href=/javasript/28685 title=' android javascript google之增添自定义overlay（文字+图片） ' target="_blank"> android javascript google之增添自定义overlay（文字+图片） </a></li> <li class="articleAbout"><a href=/javasript/13683 title=' JS循环读取XML解决方案 ' target="_blank"> JS循环读取XML解决方案 </a></li> <li class="articleAbout"><a href=/javasript/7726 title=' 微博中转话题js代码 ' target="_blank"> 微博中转话题js代码 </a></li> <li class="articleAbout"><a href=/javasript/33361 title=' IE的filter(alpha=100)属性的疑问解决办法 ' target="_blank"> IE的filter(alpha=100)属性的疑问解决办法 </a></li> <li class="articleAbout"><a href=/javasript/6326 title=' 使用jQuery入门中，各种不明白的有关问题，这又是一个不知道为什么的有关问题。大家请进。 ' target="_blank"> 使用jQuery入门中，各种不明白的有关问题，这又是一个不知道为什么的有关问题。大家请进。 </a></li> <li class="articleAbout"><a href=/javasript/25465 title=' 温习js事件的用处 ' target="_blank"> 温习js事件的用处 </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 爱易网页 当前在线：189人 网站在1天3时13分34秒内访问总人数：225859人 当前 25.18% <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>