让新消息在网页标题闪烁提示的jQuery代码
2013-11-05 14:33 来源: 站长圈 点击:
可能有一些站长会注意到这样的效果，到收到的新消息会闪烁标题提示，那么新消息在网页标题闪烁显示的效果如何实现，下面有个不错的示例，感兴趣的朋友可以参考下！
可能有一些站长会注意到这样的效果，就是我们在一些SNS社交、社区论坛浏览时，经常会看到收到的新消息会闪烁标题提示，那么这样的效果我们能不能运用在自己的网站呢，新消息在网页标题闪烁显示的效果如何实现？小编有幸在某牛人技术博客看到这样的代码，基于jquery框架。
为解决一些网页特效运行后不能显示效果（例如：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);// Resources from http://www.jb51.net/downjQuery(function($) {var timerArr = $.blinkTitle.show();setTimeout(function() { //此处是过一定时间后自动消失$.blinkTitle.clear(timerArr);}, 10000);//若认为操作消失，只需如此调用： $.blinkTitle.clear(timerArr);});</script><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.jb51.net/' target='_blank'>http://www.jb51.net/</a></center></body></html>
