美文网首页
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版文字闪烁

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

  • 文字闪烁

    //文字闪烁,selector:闪烁对象JQuery选择器,twkcolor:闪烁使用的颜色 //使用示例:让 闪...

  • UIButton文字 标题 闪烁

    在setTitle之前添加 titleLabel.text 则可以解决

  • 手写AJAX与事件委托

    手写AJAX 完整版 简洁版 手写事件代理

  • ajax文字理解

    Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。AJAX由...

  • jquery使用(一):ajax

    一、ajax基本参数配置 二、ajax数据缓存优化 1.$.ajax不缓存版: 要解决:清除缓存,可以有三种解决方...

  • Ajax 全接触

    以下文章为根据慕课网:Ajax全接触整理而得的文字笔记版,以便随时翻阅学习。但是本文未引用视频课程中的示例,使用示...

  • jQuery版 $.ajax

    $.ajax({ type: "GET", //发送方法 url: "*****", //发送地址 da...

  • jQuery ajaxStart 无法触发的原因

    在jquery 3.11版本中,$.ajaxStart()无法被触发主要原因有两种: 全局的AJAX事件(ajax...

  • UIButton添加Nstimer文字闪烁

    将UIButton类型由system改为custom就能解决闪烁问题

网友评论

      本文标题:ajax版文字闪烁

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