QQ颤动效果 _Web前端

QQ抖动效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>抖动效果</title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        var typ = ["marginTop", "marginLeft"], rangeN = 10, timeout = 20;
        function shake(o, end) {
            var range = Math.floor(Math.random() * rangeN);
            var typN = Math.floor(Math.random() * typ.length);
            o["style"][typ[typN]] = "" + range + "px";
            var shakeTimer = setTimeout(function () { shake(o, end) }, timeout);
            o[end] = function () { clearTimeout(shakeTimer) };
        }
    </script>
</head>
<body>
    <img src="http://www.baidu.com/img/baidu_sylogo1.gif" onMouseover="shake(this,'onmouseout')" >
</body>
</html>

?下面实现类似qq的抖动效果：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>抖动效果</title>
    <script type="text/javascript">
        function zd(u) {
            var a = ['top', 'left'];
            var b = 0;
            u = setInterval(function () {
                document.getElementById('qq').style[a[b % 2]] = (b++) % 4 < 2 ? 0 : 4;
                if (b > 15) {
                    clearInterval(u);
                    b = 0;
                }
            }, 32);
        } 
    </script>
</head>
<body>
    <img id="qq" alt="qq" style='position: relative' src="source/1.png" />
    <input type="button" onclick="zd()" value=" 振动 " />
</body>
</html>

?不知道为什么不能加

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

转自：http://www.nowamagic.net/librarys/veda/detail/1063