QQ抖动效果

最新推荐文章于 2024-12-15 18:28:03 发布

原创最新推荐文章于 2024-12-15 18:28:03 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml #javascript #ViewUI

WEB前端专栏收录该内容

64 篇文章

订阅专栏

<!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>

转自：http://xdwangiflytek.iteye.com/blog/1343651