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;
width: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>
