適用場合:
當(dāng)內(nèi)容變化時(shí)涨享,需要閃爍提醒用戶苦银。比如有新的未讀消息的情景。
//請求服務(wù)器,獲取需要閃爍的元素(JQuery選擇器)
//選中服務(wù)器返回結(jié)果元素并閃爍2次
function queryBlink(uri) {
$.ajax({
url:uri,
type:'post',
success:function(data) {
//通過data返回需要閃爍的數(shù)據(jù)寓免,
//data內(nèi)容示例:[{"blink": "a:contains(郵件)"}, { "blink": "a:contains(消息)"}]
//blinks = JSON.parse(data);
blinks = data;
if (blinks.length > 0) {
for(i in blinks) {
blkEle = blinks[i].blink;
//執(zhí)行2次閃爍
blink(blkEle,'#FF0000',3);
}
}
}
});
}
閃爍效果代碼
// 文字閃爍苞俘,selector:閃爍對象JQuery選擇器盹沈,blktimes:閃爍的次數(shù)
function blink(selector,twkcolor,blktimes){
//如果當(dāng)前已經(jīng)被選中,無需閃爍
if (!$(selector).parent().hasClass('current')) {
//記錄當(dāng)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');
}
//恢復(fù)顏色,延遲1秒
setTimeout(function(){$(selector).css('color',colr).css('font-weight','normal');},4500);
}
}
用法示例:
var blkuri = "headerDataController.do?getUnreader";
//注意這個(gè)鏈接返回的是json數(shù)據(jù)苗胀,內(nèi)容為那些元素需要閃爍
//內(nèi)容格式為[{"blink": "a:contains(郵件)"}, { "blink": "a:contains(消息)"}]
//a:contains(郵件) 是JQuery支持的元素選擇器
//5秒檢查一次報(bào)警數(shù)據(jù)襟诸,以控制預(yù)警標(biāo)題閃爍
var reblk = setInterval(function(){queryBlink(blkuri)},6000);