相信大多数人都对这样的效果不会陌生，当一个会员收到新的信息的时候，标题部分出现闪烁的信息。
下面通过代码实例介绍一下如何利用jQuery实现此效果。
代码实例如下:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!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> <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]
转载请注明原文链接：jQuery实现标题栏闪烁提示新信息代码示例
