相信大多数人都对这样的效果不会陌生,当一个会员收到新的信息的时候,标题部分出现闪烁的信息。
下面通过代码实例介绍一下如何利用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> <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]