jQuery实现新消息在网页标题闪烁提示
可能有一些站长会注意到这样的效果,就是我们在一些SNS社交、社区论坛浏览时,经常会看到收到的新消息会闪烁标题提示,那么这样的效果我们能不能运用在自己的网站呢,新消息在网页标题闪烁显示的效果如何实现?小编有幸在某牛人技术博客看到这样的代码,基于jquery框架。
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> <html> <head> <basehref="<%=basePath%>"> <title>MyJSP'test.jsp'startingpage</title> </head> <body> <pstyle="text-align:center;"> 请看网页标题处效果! <br/> 隔10秒后提示消失 </p> <scripttype="text/javascript" src="script/jquery-2.0.3.js"> </script> <scripttype="text/javascript"> (function($){ $.extend({ /** *调用方法:vartimerArr=$.blinkTitle.show(); *$.blinkTitle.clear(timerArr); */ blinkTitle:{ show:function(){//有新消息时在title处闪烁提示 varstep=0,_title=document.title; vartimer=setInterval(function(){ step++; if(step==3){ step=1 } if(step==1){ document.title='【】'+_title } if(step==2){ document.title='【新消息】'+_title } },500); return[timer,_title]; }, /** *@paramtimerArr[0],timer标记 *@paramtimerArr[1],初始的title文本内容 */ clear:function(timerArr){//去除闪烁提示,恢复初始title文本 if(timerArr){ clearInterval(timerArr[0]); document.title=timerArr[1]; } } } }); })(jQuery); jQuery(function($){ vartimerArr=$.blinkTitle.show(); setTimeout(function(){//此处是过一定时间后自动消失 $.blinkTitle.clear(timerArr); },10000); //若认为操作消失,只需如此调用:$.blinkTitle.clear(timerArr); }); </script> <br/> </body> </html>
以上所述就是本文的全部内容了,希望大家能够喜欢。