新消息闪烁标题提示代码分享[转]

本文纯粹是贴出一些比较实用的代码出来供大家学习和使用,也算是个人博客对这些实用代码的记录和收集吧!有用到的可以参考,没用到的直接可以飘过!

特意将这些代码写成jQuery插件的格式,这样方便大家使用的时候调用。我在平时的开发和自我学习过程中也积累了不少有用的代码,不知道怎么概括性地发布出来,所以就已文章的形式陆续贴出来与大家分享。

以单篇文章发布的插件代码都是一些简单的代码,若是一些复杂的代码或插件我会归纳到插件专区里去,这样大家下载起来也方便!

一、插件代码

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
;(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);

注意其中调用方法中的timerArr变量,若你在前面调用代码显示了效果,在页面的后面代码中需要清楚该闪烁效果的话,需要注意timerArr变量的作用域。若只是出现效果而无需清楚,则可以直接调用$.hiro.blinkNews.show()

二、调用方法

 

1
2
3
4
5
6
7
8
9
jQuery(function($) {
	var timerArr = $.blinkTitle.show();
 
	setTimeout(function() {		//此处是过一定时间后自动消失
		$.blinkTitle.clear(timerArr);
	}, 10000);
 
	//若人为操作消失,只需如此调用:	$.blinkTitle.clear(timerArr);
});

你可能感兴趣的:(jquery)