适用场合:
当内容变化时,需要闪烁提醒用户。比如有新的未读消息的情景。
//请求服务器,获取需要闪烁的元素(JQuery选择器)
//选中服务器返回结果元素并闪烁2次
function queryBlink(uri) {
$.ajax({
url:uri,
type:'post',
success:function(data) {
//通过data返回需要闪烁的数据,
//data内容示例:[{"blink": "a:contains(邮件)"}, { "blink": "a:contains(消息)"}]
//blinks = JSON.parse(data);
blinks = data;
if (blinks.length > 0) {
for(i in blinks) {
blkEle = blinks[i].blink;
//执行2次闪烁
blink(blkEle,'#FF0000',3);
}
}
}
});
}
闪烁效果代码
// 文字闪烁,selector:闪烁对象JQuery选择器,blktimes:闪烁的次数
function blink(selector,twkcolor,blktimes){
//如果当前已经被选中,无需闪烁
if (!$(selector).parent().hasClass('current')) {
//记录当CSS颜色
colr = $(selector).css('color');
$(selector).css('color',twkcolor).css('font-weight','bold');
for (var i=0;i<blktimes; i++) {
$(selector).fadeOut('slow');
$(selector).fadeIn('slow');
}
//恢复颜色,延迟1秒
setTimeout(function(){$(selector).css('color',colr).css('font-weight','normal');},4500);
}
}
用法示例:
var blkuri = "headerDataController.do?getUnreader";
//注意这个链接返回的是json数据,内容为那些元素需要闪烁
//内容格式为[{"blink": "a:contains(邮件)"}, { "blink": "a:contains(消息)"}]
//a:contains(邮件) 是JQuery支持的元素选择器
//5秒检查一次报警数据,以控制预警标题闪烁
var reblk = setInterval(function(){queryBlink(blkuri)},6000);
网友评论