美文网首页
ajax版文字闪烁

ajax版文字闪烁

作者: yahzon | 来源:发表于2018-07-14 17:07 被阅读6次

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

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

    相关文章

      网友评论

          本文标题:ajax版文字闪烁

          本文链接:https://www.haomeiwen.com/subject/fwuypftx.html