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 submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
js图片实时加载提供网页打开速度
Sep 11 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 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扩展imagick
2014/06/02 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
js常用排序实现代码
2010/12/28 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
Element中Slider滑块的具体使用
2020/07/29 Javascript
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
详解Python IO口多路复用
2020/06/17 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
python绘制分布折线图的示例
2020/09/24 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
事业单位接收函
2014/01/10 职场文书
计算机专业职业规划
2014/02/28 职场文书
导游个人求职信
2014/04/25 职场文书
工程部文员岗位职责
2015/02/04 职场文书
举起手来观后感
2015/06/09 职场文书
周末问候语大全
2015/11/10 职场文书
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电