javascript div 跳动

最新推荐文章于 2021-12-02 10:45:31 发布

iteye_16691

最新推荐文章于 2021-12-02 10:45:31 发布

阅读量203

点赞数

分类专栏： web 文章标签： web

本文链接：https://blog.csdn.net/iteye_16691/article/details/82175769

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

iteye_16691

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript div 跳动

当QQ 好友有消息时，头像是跳动，我想实现这个小功能。以下是代码，要注意的是 div 的 position 要是 absolute 或 relative &lt;html&gt;&lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt; &lt...
复制链接

扫一扫