ajax版文字闪烁

适用场合:
当内容变化时,需要闪烁提醒用户。比如有新的未读消息的情景。

//请求服务器,获取需要闪烁的元素(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

用法示例:

var blkuri = "headerDataController.do?getUnreader";
//注意这个链接返回的是json数据,内容为那些元素需要闪烁
//内容格式为[{"blink": "a:contains(邮件)"}, {  "blink": "a:contains(消息)"}]
//a:contains(邮件) 是JQuery支持的元素选择器

//5秒检查一次报警数据,以控制预警标题闪烁
var reblk = setInterval(function(){queryBlink(blkuri)},6000); 

你可能感兴趣的:(ajax版文字闪烁)