可能有些站長會注意到這樣的效果,就是我們在一些SNS社交、社群論壇瀏覽時,常常會看到收到的新訊息會閃爍標題提示,那麼這樣的效果我們能不能運用在自己的網站呢,新訊息在網頁標題閃爍顯示的效果如何實現?小編有幸在某牛人技術部落格看到這樣的程式碼,基於jquery框架。 為解決一些網頁特效運作後無法顯示效果(例如:jQuery則需要刷新)問題,腳本之家特別新增網頁版示範。 複製程式碼 程式碼如下: PUBL "//W3C/ DTD HTML 4.01 Transitional//EN"> My JSP 'test.jsp' starting page 請看網頁標題處效果! 隔10秒後提示消失 src="script/jquery-2.0.3.js "> <BR> <br><br>(function($) { <BR>$.extend( { <BR>/**<BR>* 呼叫方法: var timerArr = $.blinkTitle.show(); <BR>* $.blinkTitle.clear(timerArr); <BR>*/ <BR>blinkTitle : { <BR>show : function() { //有新訊息時在title處閃爍提示<BR>var step = 0, _title = document.title; <BR>var timer = setInterval (function() { <BR>step ; <BR>if (step == 3) { <BR>step = 1 <BR>} <br><br>if (step == 1) { <BR>document. title = '【 】' _title <BR>} <br><br>if (step == 2) { <BR>document.title = '【新訊息】' _title <BR>} <br><br>} , 500); <BR>return [ timer, _title ]; <BR>}, <BR>/**<BR>* @param timerArr[0], timer標記 <BR>* @param timerArr[1], 初始的title文字內容 <BR>*/ <BR>clear : function(timerArr) { //移除閃爍提示,恢復初始title文字<BR>if (timerArr) { <BR>clearInterval(timerArr[0]); <BR>document.title = timerArr[1]; <BR>} <br><br>} <BR>} <BR>} <BR><BR>} <BR>} <BR>} <BR><BR>} <BR>} <BR>} ); <BR>})(jQuery); <BR>// Resources from http://www.jb51.net/down <BR>jQuery(function($) { <BR>var timerArr = $.blinkTitle.show (); <BR>setTimeout(function() { //此處是過一段時間後自動消失<BR>$.blinkTitle.clear(timerArr); <BR>}, 10000); <BR>//若認為操作消失,只要如此呼叫: $.blinkTitle.clear(timerArr); <BR>}); <BR> 如無法顯示效果,請按Ctrl F5刷新本頁,更多網頁代碼: http://www.jb51.net/