• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

jQuery实现标题栏闪烁提示新信息代码示例

jquery 程序员 7年前 (2019-01-19) 150次浏览 已收录 0个评论

相信大多数人都对这样的效果不会陌生,当一个会员收到新的信息的时候,标题部分出现闪烁的信息。

下面通过代码实例介绍一下如何利用jQuery实现此效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery实现标题栏闪烁提示新信息-搞代码gaodaima.com</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
;(function($) {
  $.extend({
    blinkTitle : {
      show : function() {
        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];
      },
      clear : function(timerArr) {
        if(timerArr) {
          clearInterval(timerArr[0]); 
          document.title = timerArr[1];
        };
      }
    }
  });
})(jQuery);
  
jQuery(function($) {
  var timerArr = $.blinkTitle.show();
  setTimeout(function() {
    $.blinkTitle.clear(timerArr);
  }, 100000);
});
</script>
</head>
<body>
<div id="box">注意观看网页标题栏,【新消息】这个词会闪烁</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).;(function($) {})(jQuery),一个匿名自执行函数,前面的分号一般是用来在压缩时候防止出错。

(2).$.extend({}),扩展jQuery对象。

(3).blinkTitle : {},扩展到jQuery对象的属性。

(4).show : function() {

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];

},此方法实现了标题栏闪烁效果。

var step=0,声明一个变量用作判断标题栏显示何种内容的标识。

_title = document.title,获取标题栏的内容。

再下面就是每个500毫秒置换一次title内容,于是就实现了闪烁效果。

(5).clear : function(timerArr) {

if(timerArr) {

clearInterval(timerArr[0]);

document.title = timerArr[1];

};

}此方法可以听停止闪烁效果。

(6).jQuery(function($) {}),文档结构完全加载完毕再去执行函数中的代码。

(7).var timerArr = $.blinkTitle.show(),开始闪烁效果。

(8).setTimeout(function() {

$.blinkTitle.clear(timerArr);

}, 10000),可以在10000毫秒以后停止闪烁效果。

 

本文案例为大家展示了《jQuery实现标题栏闪烁提示新信息代码示例》的代码,若要看代码效果请大家点击“运行代码”按钮。

[code]<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>jQuery实现标题栏闪烁提示新信息-搞代码gaodaima.com</title> <script src=”http://libs.baidu.com/jquery/1.9.0/jquery.js”></script&gt; <script type=”text/javascript”> ;(function($) {   $.extend({     blinkTitle : {       show : function() {         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];       },       clear : function(timerArr) {         if(timerArr) {           clearInterval(timerArr[0]);           document.title = timerArr[1];         };       }     }   }); })(jQuery);    jQuery(function($) {   var timerArr = $.blinkTitle.show();   setTimeout(function() {     $.blinkTitle.clear(timerArr);   }, 100000); }); </script> </head> <body> <div id=”box”>注意观看网页标题栏,【新消息】这个词会闪烁</div> </body> </html>[/code]


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:jQuery实现标题栏闪烁提示新信息代码示例

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址