Div 定时移动 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <title></title>
 7     <script src="js/jquery-1.11.1.js" type="text/javascript"></script>
 8 </head>
 9 <style>
10   button{width:80px; height:50px; margin: 10px;}
11   #divRed{width: 100px; height: 100px; background-color: red; position: absolute; top:90px; left: 0; }
12 </style>
13 <body>
14     <button type="text" id="btnLeft">左移动</button>
15     <button type="text" id="btnRight">右移动</button>
16     <div id="divRed"></div>
17     <script  type="text/javascript" charset="utf-8">
18        $(function(){
19               var btnL = $('#btnLeft');
20               var btnR = $('#btnRight');
21               var divR = $('#divRed');
22                btnL.click(function(){
23                MoveDiv(divR,'left',10,0)
24              });
25              btnR.click(function(){
26                MoveDiv(divR,'left',10,500)
27              });
28                  function MoveDiv(obj,pos,dir,targer){
29                      dir=parseInt(obj.css(pos)) < targer ? dir: -dir;
30                        clearInterval(obj.timer)
31                      obj.timer=setInterval(function(){
32                         var  speed=parseInt(obj.css(pos))+dir;
33                         console.log(obj,pos);
34                        if(speed > targer && dir > 0 ||  speed < targer && dir < 0  ){ speed = targer;}
35                             obj.css(pos,speed +'px');
36                           if(speed== targer){  clearInterval(obj.timer)}
37  
38                        },30);  
39 
40                  }
41 
42             
43         
44           
45              
46        })
47    </script>  
48 </body>
49 </html>

 

posted @ 2016-12-21 17:09  deveil  阅读(244)  评论(0)    收藏  举报