js模拟手机触摸屏

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

     *{padding:;margin:;list-style:none;}

     #box{width:600px; height:400px; border:1px solid #; margin:50px auto; position:relative;}

     #iph{width:200px; height:200px; border:1px solid #ccc; position:absolute; top:%; left:370px; margin-top:-100px; overflow:hidden;}

     #wrap{position:absolute;top:;left:; width:800px; height:200px;}

     #wrap li{float:left; width:200px; height:200px;}

 </style>

 <script src="move.js"></script>

 <script>

 window.onload=function(){

     var oW=document.getElementById('wrap');

     var oBox=document.getElementById('box');

     var aLi=oW.children;

     var count=;

     oW.onmousedown=function(ev){

         clearInterval(oW.timer);

         var oEvent=ev||event;

         var start=oEvent.clientX;

         var disX=oEvent.clientX-oW.offsetLeft;

         document.onmousemove=function(ev){

             var oEvent=ev||event;

             var l=oEvent.clientX-disX;

             oW.style.left=l+'px';

         };

         document.onmouseup=function(ev){

             var oEvent=ev || event;

             var end=oEvent.clientX;

             if(end-start>){

                 count--;

                 if(count==-){

                     count=;

                 }

                 move(oW,{left:-aLi[].offsetWidth*count});

             }else if(end-start<-){

                 count++;

                 if(count==aLi.length){

                     count=aLi.length-;

                 }

                 move(oW,{left:-aLi[].offsetWidth*count});

             }else{

                 move(oW,{left:-aLi[].offsetWidth*count});

             }

             document.onmousemove=null;

             document.onmouseup=null;

         };

         return false;

     };

 };

 </script>

 </head>

 <body>

 <div id="box">

     <div id="iph">

         <ul id="wrap">

             <li style="background:red;"></li>

             <li style="background:yellow;"></li>

             <li style="background:blue;"></li>

             <li style="background:green;"></li>

         </ul>

     </div>

 </div>

 </body>

 </html>
巴特西

js模拟手机触摸屏

最新文章

热门文章
