爱易网
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 浏览次数：20483 次
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/28830' title=' extjs4 组件增添陷阱 ' target="_blank"> extjs4 组件增添陷阱 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/37764' title=' 共享-完美的多附件上传效果。该怎么解决 ' target="_blank"> 共享-完美的多附件上传效果。该怎么解决 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/29844' title=' 怎么读取层的top和left并更改 ' target="_blank"> 怎么读取层的top和left并更改 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/8295' title=' 关于 iframe 里面放视频的有关问题 ' target="_blank"> 关于 iframe 里面放视频的有关问题 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/22643' title=' Node.js从入门到深入——Node.js配备开发 ' target="_blank"> Node.js从入门到深入——Node.js配备开发 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/35374' title=' nextSibling的有关问题 ' target="_blank"> nextSibling的有关问题 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/11491' title=' 证实JS中window.setTimeout函数为单线程 ' target="_blank"> 证实JS中window.setTimeout函数为单线程 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/23268' title=' 关于 <select> 的有关问题 ' target="_blank"> 关于 <select> 的有关问题 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/6258' title=' 请问，easyUI中datagrid，在后台获取不到数据就会报错 ' target="_blank"> 请问，easyUI中datagrid，在后台获取不到数据就会报错 </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/hostTest15dayCdn.png" alt="香港全能空间 免费试用15天，送网站加速30M" /></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/20083 title=' 跨域代理页执行Javascript控制TOP窗体dom,安全有关问题 ' target="_blank"> 跨域代理页执行Javascript控制TOP窗体dom,安全有关问题 </a></li> <li class="articleAbout"><a href=/javasript/30568 title=' 图像为什么刷新一下才能显示？启动时是空白页，这是咋回事 ' target="_blank"> 图像为什么刷新一下才能显示？启动时是空白页，这是咋回事 </a></li> <li class="articleAbout"><a href=/javasript/33491 title=' 跪求解释！解决方案 ' target="_blank"> 跪求解释！解决方案 </a></li> <li class="articleAbout"><a href=/javasript/29358 title=' javascript获取iframe文档内容(兼容IE跟Firefox) ' target="_blank"> javascript获取iframe文档内容(兼容IE跟Firefox) </a></li> <li class="articleAbout"><a href=/javasript/26833 title=' 基于ExtJS Grid创造Table例子 ' target="_blank"> 基于ExtJS Grid创造Table例子 </a></li> <li class="articleAbout"><a href=/javasript/35707 title=' IE 不认识 java.net.URL或者java.io 怎么处理, FF没有关问题(急) ' target="_blank"> IE 不认识 java.net.URL或者java.io 怎么处理, FF没有关问题(急) </a></li> <li class="articleAbout"><a href=/javasript/5164 title=' JavaScript跟prototype ' target="_blank"> JavaScript跟prototype </a></li> <li class="articleAbout"><a href=/javasript/5778 title=' js arguments的应用 ' target="_blank"> js arguments的应用 </a></li> <li class="articleAbout"><a href=/javasript/24954 title=' js表单印证 ' target="_blank"> js表单印证 </a></li> <li class="articleAbout"><a href=/javasript/34754 title=' 怎样将页面在打开后将滑动条自动滚动到指定的地方解决办法 ' target="_blank"> 怎样将页面在打开后将滑动条自动滚动到指定的地方解决办法 </a></li> <li class="articleAbout"><a href=/javasript/37811 title=' 请教这个函数是做什么用的 ' target="_blank"> 请教这个函数是做什么用的 </a></li> <li class="articleAbout"><a href=/javasript/3878 title=' Ajax异步刷新在jsp页面上将将毫秒数转换终日期格式（js实现） ' target="_blank"> Ajax异步刷新在jsp页面上将将毫秒数转换终日期格式（js实现） </a></li> <li class="articleAbout"><a href=/javasript/23558 title=' JSR315札记 ' target="_blank"> JSR315札记 </a></li> <li class="articleAbout"><a href=/javasript/20298 title=' javascript兑现倒计时 ' target="_blank"> javascript兑现倒计时 </a></li> <li class="articleAbout"><a href=/javasript/10927 title=' JSON官方的java扩展未对汉字未进行ascii转义的有关问题 ' target="_blank"> JSON官方的java扩展未对汉字未进行ascii转义的有关问题 </a></li> <li class="articleAbout"><a href=/javasript/26006 title=' JSON字符串跟对象相互转换 ' target="_blank"> JSON字符串跟对象相互转换 </a></li> <li class="articleAbout"><a href=/javasript/37497 title=' 大侠们，救啊快来帮帮小弟我！ ' target="_blank"> 大侠们，救啊快来帮帮小弟我！ </a></li> <li class="articleAbout"><a href=/javasript/24346 title=' 出了一套Javascript的笔考试题 ' target="_blank"> 出了一套Javascript的笔考试题 </a></li> <li class="articleAbout"><a href=/javasript/13833 title=' 写个JavaScript统制生成表格(GridView)的类 ' target="_blank"> 写个JavaScript统制生成表格(GridView)的类 </a></li> <li class="articleAbout"><a href=/javasript/24029 title=' JavaScript 触发click事件 兼容FireFox，IE 跟 Chrome ' target="_blank"> JavaScript 触发click事件 兼容FireFox，IE 跟 Chrome </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-2024 爱易网页 当前在线：337人 网站在8时8分34秒内访问总人数：111118人 当前 15.77% <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>