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


Posted in Javascript onMarch 11, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
javascript背投广告代码的完善
Apr 08 Javascript
javascript 表单规则集合对象
Jul 21 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
javascript实现支付宝滑块验证码效果
Jul 24 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 #Javascript
JavaScript实现SHA-1加密算法的方法
Mar 11 #Javascript
JavaScript前补零操作实例
Mar 11 #Javascript
JavaScript限定图片显示大小的方法
Mar 11 #Javascript
iScroll中事件点击触发两次解决方案
Mar 11 #Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 #Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 #Javascript
You might like
JpGraph php柱状图使用介绍
2011/08/23 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
JavaScript面向对象编程
2008/03/02 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
使用python实现rsa算法代码
2016/02/17 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
基于Python闭包及其作用域详解
2017/08/28 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
如何利用python进行时间序列分析
2020/08/04 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
家教广告词
2014/03/19 职场文书
家长对学生的评语
2014/04/18 职场文书
爱我中华演讲稿
2014/05/20 职场文书
公司催款律师函
2015/05/27 职场文书