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 ajax中使用jsonp的限制解决方法
Nov 22 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 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+MySQL修改记录的方法
2015/01/21 PHP
PHP Include文件实例讲解
2019/02/15 PHP
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
JSONP之我见
2015/03/24 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
Node.js Express安装与使用教程
2018/05/11 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
python根据出生日期返回年龄的方法
2015/03/26 Python
浅析Python中的多条件排序实现
2016/06/07 Python
Python中列表元素转为数字的方法分析
2016/06/14 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
python定向爬取淘宝商品价格
2018/02/27 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
python实现list由于numpy array的转换
2018/04/04 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
2014年领导班子工作总结
2014/12/11 职场文书
作息时间调整通知
2015/04/22 职场文书
学生退学证明
2015/06/23 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis