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