function shake(obj,attr,endfn) { if( obj.shaked ) { return; } obj.shaked = true; var num = 0; var timer = null; var arr = []; var pos = parseInt(getstyle(obj,attr)); for( var i = 20; i > 0; i-=2 ) { arr.push(i,-i); } arr.push(0); clearInterval(obj.shake); obj.shake = setInterval(function () { obj.style[attr] = pos + arr[num] +'px'; num++; if(num==arr.length) { clearInterval(obj.shake); endfn&&endfn(); obj.shaked = false; } },50); };
function getstyle(obj,attr) { return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; }
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> img{ position:absolute; top:200px; 150px; height:100px; } </style> <script src="float.js"></script> <script> window.onload = function () { var oimg = document.getElementsByTagName('img'); for(var i = 0; i< oimg.length; i++ ) { oimg[i].style.left = 20 + i * 160 + 'px'; oimg[i].onmouseover = function() { shake(this,'top') }; } } </script> </head> <body> <img src="img/5-1.jpg"> <img src="img/5-2.jpg"> <img src="img/5-3.jpg"> <img src="img/5-4.jpg"> <img src="img/5-5.jpg"> </body> </html>