抖动 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    *{margin:0;padding:0;}
    img{position:absolute;left:30px;top:100px;height:100px;}
</style>
<body>
    <img src ="../img/1.jpg" id = "img1"/>
    <script type="text/javascript">
        window.onload = function(){
            var oImg = document.getElementById('img1');
            oImg.onclick = function(){
                shake(this, 'left');
            }
            var arr = [];
            for(var i = 20; i > 0 ; i-=2){
                arr.push(i, -i);
            }
            arr.push(0);
            var num = 0;
            function shake(obj, attr, func){
                clearInterval(obj.timer);
                obj.timer = setInterval(
                    function(){
                        obj.style[attr] = parseInt(getStyle(obj, attr)) + arr[num] + 'px';
                        num++;
                        if(num == arr.length){
                            clearInterval(obj.timer);
                            func && func();
                        }
                    },30
                );
            }
            function getStyle(obj, attr){
                return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
            }
        }
    </script>
</body>
</html>

 

posted @ 2014-12-11 21:46  北京-树苗  阅读(131)  评论(0)    收藏  举报