您的位置：首页 > Web前端 > JQuery

jQuery 让新消息在网页标题闪烁提示代码

2013-11-04 09:58 423 查看

可能有一些站长会注意到这样的效果，就是我们在一些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.veryhuo.com/down
jQuery(function($) {

var timerArr = $.blinkTitle.show();

setTimeout(function() { //此处是过一定时间后自动消失

$.blinkTitle.clear(timerArr);

}, 10000);

//若认为操作消失，只需如此调用：
$.blinkTitle.clear(timerArr);

});

</script>

<br />

<center>

如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：

<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a>

</center>

</body>

</html>

原文地址: http://www.veryhuo.com/a/view/33094.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航