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

这篇文章主要介绍了jQuery实现新消息闪烁标题提示的方法,实例分析了jQuery操作样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery实现新消息闪烁标题提示的方法。分享给大家供大家参考。具体如下：

该代码可实现在标题栏部位闪烁地显示提示信息。

1. jQuery插件风格代码

1. ;(function($) { 
2. $.extend({ 
3. /** 
4. * 调用方法： var timerArr = $.blinkTitle.show(); 
5. * $.blinkTitle.clear(timerArr); 
6. */ 
7. blinkTitle : { 
8. show : function() { //有新消息时在title处闪烁提示 
9. var step=0, _title = document.title; 
10. var timer = setInterval(function() { 
11. step++; 
12. if (step==3) {step=1}; 
13. if (step==1) {document.title='【　　　】'+_title}; 
14. if (step==2) {document.title='【新消息】'+_title}; 
15. }, 500); 
16. return [timer, _title]; 
17. }, 
18. /** 
19. * @param timerArr[0], timer标记 
20. * @param timerArr[1], 初始的title文本内容 
21. */ 
22. clear : function(timerArr) { 
23. //去除闪烁提示，恢复初始title文本 
24. if(timerArr) { 
25. clearInterval(timerArr[0]);  
26. document.title = timerArr[1]; 
27. }; 
28. } 
29. } 
30. }); 
31. })(jQuery); 

2. 调用方法如下：

1. jQuery(function($) { 
2. var timerArr = $.blinkTitle.show(); 
3. setTimeout(function() {//此处是过一定时间后自动消失 
4. $.blinkTitle.clear(timerArr); 
5. }, 10000); 
6. //若人为操作消失，只需如此调用：$.blinkTitle.clear(timerArr); 
7. }); 

完整实例代码点击此处本站下载。

希望本文所述对大家的jQuery程序设计有所帮助。