js模拟手机触摸屏 

 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="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>

 

posted @ 2016-11-11 23:38  Jason齐齐  阅读(1946)  评论(0)    收藏  举报