抖起来的图片 

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>

 

posted @ 2014-12-23 11:27  mayufo  阅读(188)  评论(0)    收藏  举报