首页 > 代码库 > 手机触摸屏
手机触摸屏
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 *{padding:0;margin:0;list-style:none;} 8 #box{width:600px; height:400px; border:1px solid #000; margin:50px auto; position:relative;} 9 #iph{width:200px; height:200px; border:1px solid #ccc; position:absolute; top:50%; left:370px; margin-top:-100px; overflow:hidden;}10 #wrap{position:absolute;top:0;left:0; width:800px; height:200px;}11 #wrap li{float:left; width:200px; height:200px;}12 </style>13 <script src=http://www.mamicode.com/"move.js"></script>14 <script>15 window.onload=function(){16 var oW=document.getElementById(‘wrap‘);17 var oBox=document.getElementById(‘box‘);18 var aLi=oW.children;19 var count=0;20 oW.onmousedown=function(ev){21 clearInterval(oW.timer);22 var oEvent=ev||event;23 var start=oEvent.clientX;24 var disX=oEvent.clientX-oW.offsetLeft;25 document.onmousemove=function(ev){26 var oEvent=ev||event;27 var l=oEvent.clientX-disX;28 oW.style.left=l+‘px‘;29 };30 document.onmouseup=function(ev){31 var oEvent=ev || event;32 var end=oEvent.clientX;33 if(end-start>30){34 count--;35 if(count==-1){36 count=0; 37 }38 move(oW,{left:-aLi[0].offsetWidth*count}); 39 }else if(end-start<-30){40 count++;41 if(count==aLi.length){42 count=aLi.length-1; 43 }44 move(oW,{left:-aLi[0].offsetWidth*count}); 45 }else{46 move(oW,{left:-aLi[0].offsetWidth*count}); 47 }48 document.onmousemove=null;49 document.onmouseup=null; 50 };51 return false; 52 }; 53 };54 </script>55 </head>56 57 <body>58 <div id="box">59 <div id="iph">60 <ul id="wrap">61 <li style="background:red;"></li>62 <li style="background:yellow;"></li>63 <li style="background:blue;"></li>64 <li style="background:green;"></li>65 </ul>66 </div>67 </div>68 </body>69 </html>
手机触摸屏
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。