可能有一些站長會注意到這樣的效果，就是我們在一些SNS社交、社區論壇瀏覽時，經常會看到收到的新消息會閃爍標題提示，那么這樣的效果我們能不能運用在 自己的網站呢，新消息在網頁標題閃爍顯示的效果如何實現？小編有幸在某牛人技術博客看到這樣的代碼，基于jquery框架。
<!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>以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
