這篇文章主要介紹了jQuery實現(xiàn)新消息閃爍標題提示的方法,實例分析了jQuery操作樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)新消息閃爍標題提示的方法。分享給大家供大家參考。具體如下：

該代碼可實現(xiàn)在標題欄部位閃爍地顯示提示信息。

1. jQuery插件風格代碼

1. ;(function($) { 
2. $.extend({ 
3. /** 
4. * 調(diào)用方法： 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文本內(nèi)容 
21. */ 
22. clear : function(timerArr) { 
23. //去除閃爍提示，恢復(fù)初始title文本 
24. if(timerArr) { 
25. clearInterval(timerArr[0]);  
26. document.title = timerArr[1]; 
27. }; 
28. } 
29. } 
30. }); 
31. })(jQuery); 

2. 調(diào)用方法如下：

1. jQuery(function($) { 
2. var timerArr = $.blinkTitle.show(); 
3. setTimeout(function() {//此處是過一定時間后自動消失 
4. $.blinkTitle.clear(timerArr); 
5. }, 10000); 
6. //若人為操作消失，只需如此調(diào)用：$.blinkTitle.clear(timerArr); 
7. }); 

完整實例代碼點擊此處本站下載。

希望本文所述對大家的jQuery程序設(shè)計有所幫助。