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程序设计有所帮助。

赞 (0)

相关推荐

  • 扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁

    解决思路如下: 首先,判断事件的当前节点,也就是jquery的currentTarget是否在target的包含中,即下面的扩展$.containsNode. 然后,在调用hover的时候的mouseover和mouseout事件里判断currentTarget是否在target的包含中,即$.fn.fhover扩展 下面就是相关代码: 复制代码 代码如下: $.containsNode = function(parentNode, childNode) { if (parentNode.con

  • jQuery实现不断闪烁文字的方法

    本文实例讲述了jQuery实现不断闪烁文字的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/javascript" > function blink(selector){ $(selector).fadeOut('slow', function(){ $(this).fadeIn('slow', function(){ blink(this); }); }); } $(document).ready(function(){ blink(

  • css3元素简单的闪烁效果实现(html5 jquery)

    css3 Animation: 复制代码 代码如下: @-webkit-keyframes twinkling{    /*透明度由0到1*/    0%{       opacity:0; /*透明度为0*/     }    100%{       opacity:1; /*透明度为1*/ }  } Jquery : 复制代码 代码如下: $(element).css({"-webkit-animation":"twinkling 1s infinite ease-in-

  • jquery渐隐渐显的图片幻灯闪烁切换实现方法

    本文实例讲述了jquery渐隐渐显的图片幻灯闪烁切换实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

  • 调用jQuery滑出效果时闪烁的解决方法

    问题现象如题所示,在调用jQuery 滑出效果时,层会现次闪烁一下.在网上找了许多解决文案,说要加如下标示: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 可问题是现在的 标题头已 为 html4.0 ,如若改为上面的情况,则页面会乱掉.

  • 让新消息在网页标题闪烁提示的jQuery代码

    可能有一些站长会注意到这样的效果,就是我们在一些SNS社交.社区论坛浏览时,经常会看到收到的新消息会闪烁标题提示,那么这样的效果我们能不能运用在自己的网站呢,新消息在网页标题闪烁显示的效果如何实现?小编有幸在某牛人技术博客看到这样的代码,基于jquery框架. 为解决一些网页特效运行后不能显示效果(例如:jQuery则需要刷新)问题,我们特别新增网页版演示. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transition

  • jQuery实现仿QQ头像闪烁效果的文字闪动提示代码

    jQuery实现仿QQ头像闪烁效果的文字闪动提示代码

    本文实例讲述了jQuery实现仿QQ头像闪烁效果的文字闪动提示代码.分享给大家供大家参考,具体如下: jQuery 闪动的文字提示,仿QQ头像闪烁闪动提示,可以用于错误提示或其他吸引用户注意力的场合. shake(ele,cls,times) ele : jQuery Object [object] 要闪动的元素 cls : Class Name [string] 闪动的类 times : Number [Number] 闪动几次 注意,必须调用jQuery1.4.2及以上版本,否则网页下角会提

  • jquery让指定的元素闪烁显示的方法

    本文实例讲述了jquery让指定的元素闪烁显示的方法.分享给大家供大家参考.具体如下: 这段jQuery代码非常简单,功能就是让指定的元素不断的变换颜色,闪烁显示,调用也非常简单. jQuery.fn.flash = function( color, duration ) { var current = this.css( 'color' ); this.animate( { color: 'rgb(' + color + ')' }, duration / 2 ); this.animate(

  • jQuery实现新消息在网页标题闪烁提示

    可能有一些站长会注意到这样的效果,就是我们在一些SNS社交.社区论坛浏览时,经常会看到收到的新消息会闪烁标题提示,那么这样的效果我们能不能运用在 自己的网站呢,新消息在网页标题闪烁显示的效果如何实现?小编有幸在某牛人技术博客看到这样的代码,基于jquery框架. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href=&qu

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

    本文实例讲述了jQuery实现新消息闪烁标题提示的方法.分享给大家供大家参考.具体如下: 该代码可实现在标题栏部位闪烁地显示提示信息. 1. jQuery插件风格代码 ;(function($) { $.extend({ /** * 调用方法: var timerArr = $.blinkTitle.show(); * $.blinkTitle.clear(timerArr); */ blinkTitle : { show : function() { //有新消息时在title处闪烁提示 va

  • jquery实现ajax加载超时提示的方法

    本文实例讲述了jquery实现ajax加载超时提示的方法.分享给大家供大家参考,具体如下: index.php <!doctype html> <html> <head> <meta charset="utf-8"/> <title>加载超时</title> <script type="text/javascript" src="http://lib.sinaapp.com/js

  • js实现的标题栏新消息闪烁提示效果

    公司的项目中用到了这个新消息提示的效果,主要用于提示用户有新消息.具体实现代码如下: 复制代码 代码如下: var newMessageRemind = {    _step: 0,    _title: document.title,    _timer: null,    //显示新消息提示    show: function() {        var temps = newMessageRemind._title.replace("[ ]", "").re

  • capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框

    capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框

    效果图:当浏览器滚动的时候,要浮层要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了,position:fixed,可以在IE7+和其他浏览器下浮动层平滑固定定位,由于IE6前辈不支持fixed属性,使用position:absolute属性代替,重新计算top值. 具体代码如下: HTML代码: 复制代码 代码如下: <div class="float" id="float"> <p id="WB_

  • 在标题栏显示新消息提示，很多公司项目中用到这个方法

    复制代码 代码如下: <a href="#" onclick="clearNewMessageRemind();return false;">点击取消闪烁提示</a> <script type="text/javascript"> var newMessageRemind={ _step: 0, _title: document.title, _timer: null, //显示新消息提示 show:funct

  • Android仿微信新消息提示音

    Android仿微信新消息提示音

    怕有些人不知道怎么进入微信的新消息提示音功能,我这里说下操作步骤: 打开微信----我---设置---新消息提醒---新消息提示音. 经过以上的步骤就进入了这样的界面 具体实现的步骤. 难点之一:获取到手机系统的提示音,并将它们显示在一个listview里面. 参考如下代码: // 获得RingtoneManager对象 RingtoneManager manager = new RingtoneManager(this); // 设置RingtoneManager对象的类型为TYPE_NOTI

  • jquery+php实现搜索框自动提示

    今天突然想给本站做个搜索页面,这样用户可以通过搜索来找到自己喜欢的内容,也避免了在海量信息中手动查找资源的麻烦,我的目标和百度首页的效果类似,当用户输入要搜索的文字时,我们在下方给出相关的十条信息,如果用户要找的就是这十条信息内的某一条,那么简单,直接点击就可在新页面中打开页面,主要就是想更人性化一点,让用户使用起来更方便. 先看一下效果图吧,这样更有动力,要不然大家还不知道我在讲什么,到底要达到什么样的效果! jquery+php实现搜索框自动提示 下面先主要讲解原理: 在search.htm

  • jquery SweetAlert插件实现响应式提示框

    jquery弹出层插件,支持消息提示.错误提示.确认框提示等.交互体验度非常好,大家都用微信支付.支付宝等完成用户体验度非常的不错.本插件至少要支持IE9+.使用方式也非常的简单.粗暴,很符合大众的jquery插件使用方法. 先给大家演示效果: 在线预览    源码下载 代码如下: <h1>Sweet Alert</h1> <h2>A beautiful replacement for JavaScript's "Alert"</h2>

随机推荐