结合使用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);}); //点击后停止闪动
})

评论

3 楼 caibinghong 2012-04-09  

tianhandigeng 写道

测试了一下，两张图片跳动的话，怎么点击第二张图片，第二张图片不会停止跳动，而点击第一张图片的话，二张图片都停止了

你的样式不是不没有写好，然后感觉两个都跳动。
你这样式一下看看：
<div style="height:200px;"><img src='' class="icon" height="100"></div>
<div style="height:200px;"><img src='' class="icon" height="100"></div>
用这两个去测试

2 楼 tianhandigeng 2012-04-03  

测试了一下，两张图片跳动的话，怎么点击第二张图片，第二张图片不会停止跳动，而点击第一张图片的话，二张图片都停止了

1 楼 caibinghong 2010-11-09  

如果你这个有很多信息来了，很多头象都在闪动，那么你一点击任意一个头象会不会都停止闪了