图片抖动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 <style>
 7 img{
 8     width: 150px;
 9     height: 150px;
10     float: left;
11     margin-left: 30px;
12     position: absolute;
13     top: 100px;
14 }
15 </style>
16 <script>
17 window.onload = function(){
18     function getStyle(obj,name){
19         return obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj,false)[name];
20     }
21     var aImg = document.getElementsByTagName('img');
22     var arr=[];
23     //toMove
24     function toMove(obj,valueL){
25         var timer = null;
26         var dir=true;
27         var data=20;
28 
29         clearInterval(timer);
30         timer = setInterval(function(){
31             dir=!dir;
32             if(dir){
33                 obj.style.left=valueL-data+'px';
34                 //console.log(obj.style.left);
35                 data-=2;
36             }else{
37                 obj.style.left=valueL+data+'px';
38                 //console.log(obj.style.left);
39             }
40             //console.log(obj.style.left);
41             if(data<0){
42                 clearInterval(timer);
43             }
44         },50);
45     }
46     //初始值
47     for(var i=0;i<aImg.length;i++){
48         aImg[i].style.left=30+i*180+'px';
49         aImg[i].index=i;
50         arr.push(parseInt(getStyle(aImg[i],'left')));
51         aImg[i].onmouseover = function(){
52             
53             toMove(this,arr[this.index]);
54         };    
55     }
56 };
57 </script>
58 </head>
59 <body>
60     <img src="img/0.jpg" alt="">
61     <img src="img/1.jpg" alt="">
62     <img src="img/2.jpg" alt="">
63     <img src="img/3.jpg" alt="">
64     <img src="img/4.jpg" alt="">
65     <img src="img/5.jpg" alt="">
66 </body>
67 </html>

抖动是利用了定时器，在左右来回变化实现，所以，定时器每次工作，都要先在一边，下一次在另一边，这样就能实现左右摆动，时间不能太慢，不然效果不好，还有就是为了防止每次移入时的干扰，要在函数外面只调用一次位置。。