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

 更新时间:2015年03月11日 11:57:26   作者:HiroZhang  
这篇文章主要介绍了jQuery实现新消息闪烁标题提示的方法,实例分析了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实现带延迟效果的滑动菜单代码

    jQuery实现带延迟效果的滑动菜单代码

    这篇文章主要介绍了jQuery实现带延迟效果的滑动菜单,涉及jquery鼠标事件操作页面属性定时变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • jQuery中:last-child选择器用法实例

    jQuery中:last-child选择器用法实例

    这篇文章主要介绍了jQuery中:last-child选择器用法,实例分析了:last-child选择器功能、定义及匹配父元素的最后一个子元素用法技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • JQuery CSS样式控制 学习笔记

    JQuery CSS样式控制 学习笔记

    本章内容比较简单,所以说明也比较少,有疑问也以跟帖或私聊
    2009-07-07
  • jQuery 全选效果实现代码

    jQuery 全选效果实现代码

    利用jquery实现的全选效果代码,实际上我感觉直接用js好像更容易些。不过这样对于jquery的操作可以更熟悉。
    2009-03-03
  • jQuery使用children()找到特定元素的子元素

    jQuery使用children()找到特定元素的子元素

    children()是jQuery中的内置方法,用于查找与所选元素相关的所有子元素, jQuery中的children()方法向下遍历到所选元素的单个级别并返回所有元素,我们还可以在children()的参数中添加过滤器、使用children()来定位特定的子元素以及使用each()方法来迭代子元素等
    2023-11-11
  • jquery中获取元素的几种方式小结

    jquery中获取元素的几种方式小结

    jquery中获取元素的几种方式小结,需要的朋友可以参考下。
    2011-07-07
  • jQuery Ajax页面局部加载方法汇总

    jQuery Ajax页面局部加载方法汇总

    jquery中实现ajax价值的方法有很多种,下面小编给大家介绍了jQuery Ajax页面局部加载方法汇总,非常实用具有参考借鉴价值,感谢的朋友一起看下吧
    2016-06-06
  • 关于两个jQuery(js)特效冲突的bug的解决办法

    关于两个jQuery(js)特效冲突的bug的解决办法

    下面小编就为大家带来一篇关于两个jQuery(js)特效冲突的bug的解决办法。小编觉得挺不错的,现在就分享 给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • jquery里的each使用方法详解

    jquery里的each使用方法详解

    有个同事问我each使用方法,我把我知道的用法告诉他.他却说不是这样的.如是在网上小逛了一下,果然用法有很多.下面总结下大慨的使用方法.
    2010-12-12
  • jquery实现全选功能效果的实现代码

    jquery实现全选功能效果的实现代码

    下面小编就为大家带来一篇jquery实现全选功能效果的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05

最新评论