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 相关文章推荐
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 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
php中hashtable实现示例分享
2014/02/13 PHP
PHP模板解析类实例
2015/07/09 PHP
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
JS简单获取日期相差天数的方法
2017/04/24 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
Flask之flask-script模块使用
2018/07/26 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
学习标兵获奖感言
2014/02/20 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
护士自荐信怎么写
2015/03/06 职场文书
施工安全员岗位职责
2015/04/11 职场文书
植物园观后感
2015/06/11 职场文书
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server