欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

jQuery实现新消息闪烁标题提示的方法

时间:2021-01-28 10:25:04|栏目:jquery|点击:

本文实例讲述了jQuery实现新消息闪烁标题提示的方法。分享给大家供大家参考。具体如下:

该代码可实现在标题栏部位闪烁地显示提示信息。

1. jQuery插件风格代码

;(function($) {
  $.extend({
    /**
     * 调用方法: var timerArr = $.blinkTitle.show();
     *     $.blinkTitle.clear(timerArr);
     */
    blinkTitle : {
      show : function() { //有新消息时在title处闪烁提示
        var step=0, _title = document.title;
        var timer = setInterval(function() {
          step++;
          if (step==3) {step=1};
          if (step==1) {document.title='【   】'+_title};
          if (step==2) {document.title='【新消息】'+_title};
        }, 500);
        return [timer, _title];
      },
      /**
       * @param timerArr[0], timer标记
       * @param timerArr[1], 初始的title文本内容
       */
      clear : function(timerArr) {
      //去除闪烁提示,恢复初始title文本
        if(timerArr) {
          clearInterval(timerArr[0]); 
          document.title = timerArr[1];
        };
      }
    }
  });
})(jQuery);

2. 调用方法如下:

jQuery(function($) {
  var timerArr = $.blinkTitle.show();
  setTimeout(function() {//此处是过一定时间后自动消失
    $.blinkTitle.clear(timerArr);
  }, 10000);
  //若人为操作消失,只需如此调用:$.blinkTitle.clear(timerArr);
});

完整实例代码点击此处本站下载

希望本文所述对大家的jQuery程序设计有所帮助。

上一篇:jQuery学习笔记[1] jQuery中的DOM操作

栏    目:jquery

下一篇:js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

本文标题:jQuery实现新消息闪烁标题提示的方法

本文地址:http://www.codeinn.net/misctech/52749.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有