`
caibinghong
  • 浏览: 144608 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

关于WEBQQ头象闪烁的实现

prototypejQueryFlashJavaScriptXHTML 
阅读更多 

<!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" onclick="kStop()" />
    <input type="button" value="bbbb" onclick="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 onclick="var cls=_$('ttt').className;_$('ttt').className=cls=='e-webIM-head-glimmer'?'e-webIM-def-peoplePic':'e-webIM-head-glimmer'">
        test</a>
</body>
</html>
 
分享到：
| JavaScript html js文本框只能输入数字
评论
发表评论

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

相关推荐

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