爱易网
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 浏览次数：20696 次
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/21176' title=' jquery<json->spring(3.0)之DataTables的服务器端翻页(转) ' target="_blank"> jquery<json->spring(3.0)之DataTables的服务器端翻页(转) </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/14984' title=' 惯用js跳转页面方法大全 ' target="_blank"> 惯用js跳转页面方法大全 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/14615' title=' Javascript高级程序设计》(第2版)学习札记08-面向对象的程序设计 ' target="_blank"> Javascript高级程序设计》(第2版)学习札记08-面向对象的程序设计 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/21420' title=' (json学习2)使用json需要导入的jar包_Json ' target="_blank"> (json学习2)使用json需要导入的jar包_Json </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/33705' title=' 为FORM添加ONSUBMIT事件,该怎么解决 ' target="_blank"> 为FORM添加ONSUBMIT事件,该怎么解决 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/20566' title=' JS操作DOM元素属性跟方法2 ' target="_blank"> JS操作DOM元素属性跟方法2 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/31669' title=' jsp传值有关问题，传int类型的值 ' target="_blank"> jsp传值有关问题，传int类型的值 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/34732' title=' 一个关于JS给textarea赋值的有关问题 ' target="_blank"> 一个关于JS给textarea赋值的有关问题 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/34069' title=' .NET中的ViewState通过Javascript解析以后中文是乱码。该怎么处理 ' target="_blank"> .NET中的ViewState通过Javascript解析以后中文是乱码。该怎么处理 </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/8124 title=' jQuery入门教程-15 Days of jQuery(Day 14) - Javascript 工具提示 ' target="_blank"> jQuery入门教程-15 Days of jQuery(Day 14) - Javascript 工具提示 </a></li> <li class="articleAbout"><a href=/javasript/16657 title=' JSTL中if/else施用 ' target="_blank"> JSTL中if/else施用 </a></li> <li class="articleAbout"><a href=/javasript/38686 title=' 请问怎么加载弹出的文件？ ' target="_blank"> 请问怎么加载弹出的文件？ </a></li> <li class="articleAbout"><a href=/javasript/26238 title=' JS动态逐级添加select上拉框 ' target="_blank"> JS动态逐级添加select上拉框 </a></li> <li class="articleAbout"><a href=/javasript/13425 title=' （原创）范例讲解JS复选框动态计算表格每列总和 ' target="_blank"> （原创）范例讲解JS复选框动态计算表格每列总和 </a></li> <li class="articleAbout"><a href=/javasript/32469 title=' js传引号，该如何传 ' target="_blank"> js传引号，该如何传 </a></li> <li class="articleAbout"><a href=/javasript/26031 title=' Eclipse打开JSP报错有关问题（Unable to create this part due to an internal error） ' target="_blank"> Eclipse打开JSP报错有关问题（Unable to create this part due to an internal error） </a></li> <li class="articleAbout"><a href=/javasript/30349 title=' javascript怎样打开和保存一个文本文件。该怎么解决 ' target="_blank"> javascript怎样打开和保存一个文本文件。该怎么解决 </a></li> <li class="articleAbout"><a href=/javasript/24450 title=' jquery cookie 插件 (支持json对象) 可以和jquery 集成 也可以单独使用 ' target="_blank"> jquery cookie 插件 (支持json对象) 可以和jquery 集成 也可以单独使用 </a></li> <li class="articleAbout"><a href=/javasript/23998 title=' JavaScript语言基础(4) 对象概念 ' target="_blank"> JavaScript语言基础(4) 对象概念 </a></li> <li class="articleAbout"><a href=/javasript/31240 title=' 新手 js 有关问题 搞了一天一夜了 ' target="_blank"> 新手 js 有关问题 搞了一天一夜了 </a></li> <li class="articleAbout"><a href=/javasript/6173 title=' "2013-06-09T05:25:25Z"转成一般日期 ' target="_blank"> "2013-06-09T05:25:25Z"转成一般日期 </a></li> <li class="articleAbout"><a href=/javasript/11402 title=' 【JSP】赵雅智_JSP自定义标签_容易标签 ' target="_blank"> 【JSP】赵雅智_JSP自定义标签_容易标签 </a></li> <li class="articleAbout"><a href=/javasript/35003 title=' 求年月的正则表达式yyyy-MM解决思路 ' target="_blank"> 求年月的正则表达式yyyy-MM解决思路 </a></li> <li class="articleAbout"><a href=/javasript/35530 title=' 图片自动缩放的解决方案 ' target="_blank"> 图片自动缩放的解决方案 </a></li> <li class="articleAbout"><a href=/javasript/33779 title=' textarea中限制输入字符个数的有关问题，顶者有分 ' target="_blank"> textarea中限制输入字符个数的有关问题，顶者有分 </a></li> <li class="articleAbout"><a href=/javasript/34520 title=' 怎么根据不同的判断条件引入不同的html文件 ' target="_blank"> 怎么根据不同的判断条件引入不同的html文件 </a></li> <li class="articleAbout"><a href=/javasript/11714 title=' 利用js进展IO输出 ' target="_blank"> 利用js进展IO输出 </a></li> <li class="articleAbout"><a href=/javasript/22163 title=' js 鼠标点符号击文本框 提示文字消失 （小例子） ' target="_blank"> js 鼠标点符号击文本框 提示文字消失 （小例子） </a></li> <li class="articleAbout"><a href=/javasript/13362 title=' JavaScript打包的平滑图片滚动，绝不用jQuery ' target="_blank"> JavaScript打包的平滑图片滚动，绝不用jQuery </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-2026 爱易网页 当前在线：275人 网站在6时2分41秒内访问总人数：71720人 当前 17.98% <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>