结合使用setTimeout和setInterval模拟QQ头像闪动

注: $为jQuery方法,$(el).attr(name, [value])设置或返回元素的属性
function flashIcon(el, duration){
           if(isNaN(duration))duration = 800;
            $(el).attr("stopflash", "false");
            var handler = window.setInterval(function(){
                    if($(el).attr("stopflash")=="true"){
                            window.clearInterval(handler);
                            return;
                    }
                    el.style.marginLeft = "2px";
                    el.style.marginTop = "2px";
                    window.setTimeout(function(){
                            el.style.marginLeft = "";
                            el.style.marginTop = "";
                    },duration/2);
            }, duration)
    }

function stopFlash(el){
 $(el).attr("stopflash", "true");
}

//使用
$("img.icon").each(function(){
    flashIcon(this);
   $(this).one("click",function(){ stopFlash(this);}); //点击后停止闪动
})

你可能感兴趣的:(JavaScript,jquery,qq)