关于WEBQQ头象闪烁的实现

最新推荐文章于 2021-05-26 16:40:26 发布

前端开发工程师

最新推荐文章于 2021-05-26 16:40:26 发布

阅读量88

点赞数

分类专栏： javascript 常见问题文章标签： prototype jQuery Flash JavaScript XHTML ViewUI

本文链接：https://blog.csdn.net/caibinghong/article/details/83767533

版权

javascript 常见问题专栏收录该内容

60 篇文章 0 订阅

订阅专栏

<!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="jquery-1.2.6.js" type="text/javascript"></script>

</head>
<body>
    <input type="button" value="aaaa" οnclick="kStop()" />
    <input type="button" value="bbbb" οnclick="k1Stop()" />
    <style>
        .face,.faceflash
        {
            margin: 5px;
            height: 50px;
            width: 50px;
            border: 1px blue solid;
        }
        .faceflash
        {
            margin: 10px;
            border-color:red;
        }
    </style>
    <div style="position: relative; height: 500px; width: 500px; border: 1px red solid;">
        <div class="face" id="aaaa">aaaa
        </div>
    </div>
    <div style="position: relative; height: 500px; width: 500px; border: 1px red solid;">
        <div class="face" id="bbbb">bbbb
        </div>
    </div>

    <script>
        var webIMFlashIcon = function(el, cls) {
            this.init(el, cls);
        }
        webIMFlashIcon.prototype.init = function( el, cls) {            
            this.el = el;
            this.cls = cls;
            this.oldCls = el.className; 
            this.startFlash();
        }
        webIMFlashIcon.prototype.flash = function() {
            window.status = (this.cls + " - " + this.oldCls ); 
            this.el.className = this.el.className == this.cls ? this.oldCls : this.cls;
        }
        webIMFlashIcon.prototype.stopFlash = function() {
            this.el.className = this.oldCls;
            window.clearInterval(this.Interval);
            this.finalize();
        }
        webIMFlashIcon.prototype.startFlash = function() {
            var entity = this;
            this.Interval = setInterval(function() { entity.flash() }, 500);
        }
        webIMFlashIcon.prototype.finalize = function() {
            for (var item in this) {
                if (item) {
                    item = null;
                }
            } 
        }


        var k = new webIMFlashIcon(document.getElementById("aaaa"), "faceflash");
        var k1 = new webIMFlashIcon(document.getElementById("bbbb"), "faceflash"); 

        function kStop() {
            stop(k);
        }
        function k1Stop() {
            stop(k1);
        }

        function stop(flashObj) {
            flashObj.stopFlash();
        }
    </script>

    <a οnclick="var cls=_$('ttt').className;_$('ttt').className=cls=='e-webIM-head-glimmer'?'e-webIM-def-peoplePic':'e-webIM-head-glimmer'">
        test</a>
</body>
</html>