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>
以上所述就是本文的全部内容了，希望大家能够喜欢。