`
ipython
  • 浏览: 288844 次
  • 性别: Icon_minigender_1
  • 来自: 佛山
社区版块
存档分类
最新评论

javascript div 跳动

    博客分类：
  • web
web 
阅读更多

当QQ 好友有消息时，头像是跳动，我想实现这个小功能。

以下是代码，要注意的是 div 的 position 要是 absolute 或 relative

 

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>跳动</title>
    <style type="text/css" media="screen">
        #id1,#id2,#id3 {width:200px; height:100px; background-color:#E5E5E5; margin:20px; position:relative;}
    </style>
    
</head>
<body>
    <div id="id1">
       hello, div 1 
    </div>
    <div id="id2">
       hello, div 2 
    </div>
    <div id="id3">
       hello, div 3 
    </div>

    <script type="text/javascript" charset="utf-8">
        var $ = function (name) { return document.getElementById(name) } ;
        function icon_jump (elem,color) {
            var i = 0;
            function jump (elem,i) {
                var offset = (i % 2 ==0 ) ? -1 : 1;
                elem.style.top = elem.clientTop + offset;
            }
            function flash(elem,i) {
                var color  = (i % 2 ==0 ) ? 'white': '#E5E5E5';
                elem.style.background = color;
            }
            setInterval (function () { 
                jump (elem, i); 
                if ( color==1 ) 
                    flash (elem,i); 
                i++;
            }, 300); 
        }

        icon_jump ($('id1'),0);
        icon_jump ($('id2'),1);
    </script>
</body>
</html>
 
分享到：
| javascript 向下滚动
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics