這篇文章主要介紹了jQuery實現新消息在網頁標題閃爍提示的相關資料,需要的朋友可以參考下
可能有一些站長會注意到這樣的效果，就是我們在一些SNS社交、社區論壇浏覽時，經常會看到收到的新消息會閃爍標題提示，那麼這樣的效果我們能不能運用在 自己的網站呢，新消息在網頁標題閃爍顯示的效果如何實現？小編有幸在某牛人技術博客看到這樣的代碼，基於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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'test.jsp' starting page</title> </head> <body> <p style="text-align: center;"> 請看網頁標題處效果！ <br /> 隔10秒後提示消失 </p> <script type="text/javascript" src="script/jquery-2.0.3.js"> </script> <script type="text/javascript"> (function($) { $.extend( { /** * 調用方法： var timerArr = $.blinkTitle.show(); * $.blinkTitle.clear(timerArr); */ blinkTitle : { show : function() { //有新消息時在title處閃爍提示 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 ]; }, /** * @param timerArr[0], timer標記 * @param timerArr[1], 初始的title文本內容 */ clear : function(timerArr) { //去除閃爍提示，恢復初始title文本 if (timerArr) { clearInterval(timerArr[0]); document.title = timerArr[1]; } } } }); })(jQuery); jQuery(function($) { var timerArr = $.blinkTitle.show(); setTimeout(function() { //此處是過一定時間後自動消失 $.blinkTitle.clear(timerArr); }, 10000); //若認為操作消失，只需如此調用： $.blinkTitle.clear(timerArr); }); </script> <br /> </body> </html>以上所述就是本文的全部內容了，希望大家能夠喜歡。