`
hudeyong926
  • 浏览: 2018284 次
  • 来自: 武汉
社区版块
存档分类
最新评论

利用jquery制作闪动标题

JavaScriptAjaxCC++C# 
阅读更多

jquery获取head的title

$(document).ready(function(){
	alert($("title").html());
	$(document)[0].title='dd';
});
jQuery(function($) {
	setInterval(function(){
		$.get("Untitled-2.html", function(data){
			if(data == 1){//有新消息
				var timerArr = $.blinkTitle.show();
				setInterval(function() {        //此处是过一定时间后自动消失
					$.blinkTitle.clear(timerArr);
				}, 4000)
			}else{
				$.blinkTitle.clear(timerArr);
			}
		});
	},4000);
	//若认为操作消失，只需如此调用：    $.blinkTitle.clear(timerArr);
});

  送达方式发

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新消息闪烁提示Demo</title>
</head>
 
<body>
	<p style="text-align:center;">请看网页标题处效果！
    	<br/>隔10秒后提示消失
    </p>
	<script type="text/javascript" src="../js/jquery-1.4.2.min.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);
		
	jQuery(function($) {
		var timerArr = $.blinkTitle.show();
		
		setTimeout(function() {		//此处是过一定时间后自动消失
			$.blinkTitle.clear(timerArr);
		}, 10000);
		
		//若认为操作消失，只需如此调用：	$.blinkTitle.clear(timerArr);
	});
	</script>
</body>
</html>
  • 大小: 404 Bytes
  • 大小: 370 KB
分享到：
| editplus 宝典
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics