#hBg {
	width: 100%;
	background: #000;
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 998;/*关键,设置层级*/
}
.bar, .bar a {
	width: 160px;
	height: 142px;
	position: absolute;
	display: block;/*关键,设置a标签为块状显示*/
}
.bar {
	background: #000 url('ie6.jpg') no-repeat 0 0;
	display: none;
	z-index: 999;/*关键,设置层级比背景高一级*/
}

function ie6H(){
	var browser=[
		{title:'chrome',url:'google.com/chrome/?hl=zh-CN'},
		{title:'Mozilla Firefox ',url:'mozillaonline.com/'},
		{title:'opera',url:'opera.com/'},
		{title:'safari',url:'apple.com.cn/safari/'}
	];
	var str='<div id="hBg"></div>';//创建字符串
	for(var i=0;i<4;i++){
		str+='<div id="ab'+i+'" class="bar" style="background-position: '+i*(-160)+'px 0"></div>';
	}
	for(var l=0;l<4;l++){
		str+='<div id="ab'+(l+4)+'" class="bar" style="background-position: '+l*(-160)+'px -142px"><a href="http://www.'+browser[l].url+'" title="'+browser[l].title+'" target="_blank"></a></div>';
	}//之所以使用两个for循环是为了减少计算次数,这样只计算8次,而使用for里嵌套if的话会计算12次,为什么是12?
	$('body').append(str);//构建好字符串后加入文档流最后
	var $left=($(document).width()-640)/5;
	var $leftlist=[$left,$left*2+160,$left*3+320,$left*4+480];//计算各元素开始时的横向位置
	$left=$left*2.5;
	var $leftli=[$left,$left+160,$left+320,$left+480];//结束时的横向位置
	var $topli=[150,150,150,150,292,292,292,292];//结束高度,全部计算出来列入也是为了减少计算次数
	var $toplist=[50,50,50,50,392,392,392,392];//开始高度
	$('html,body').animate({scrollTop: 0});//强制浏览器滚动到文档顶部
	$('#hBg').height($(document).height()).fadeTo("slow", 0.8,function(){//背景设置为文档高度并渐显
		for(var li=0;li<8;li++){
			$('#ab'+i).css({left:$leftlist[li%4],top:$toplist[li]}).animate({left:$leftli[li%4],top:$topli[li],opacity:'show'},'slow')
		}//通过css给予初始位置,然后animate动画进行到结束位置并显示
	}).click(function(){
		for(var lio=0;lio<8;lio++){
			$('#ab'+i).stop().animate({left:$leftlist[lio%4],top:$toplist[lio],opacity:'hide'},'1000',function(){
				$(this).remove();
			});
		}
		$(this).remove();
	})//添加背景点击事件,点击后动画到开始位置并remove移除
}
$(function(){//文档加载完成后执行
	if($.browser.msie&&parseInt($.browser.version,10)<7)//判断ie6
		ie6H();
})

$.showad=function(src,width,height,num,top,distance){
	var i,m,l,t;
	var dw=width/num;
	height=height/2;
	distance=distance/2;
	var left=($(document).width()-width)/(num+1);
	var leftl=left*(num+1)/2;
	var $l=new Array();
	var $t=new Array();
	$('html,body').animate({scrollTop: 0});
	$('<div></div>',{
		id:'hBg',
		css:{
			width:'100%',
			height:$(document).height(),
			background:'#000',
			display:'none',
			position:'absolute',
			left:0,
			top:0,
			zIndex:998
		}
	}).appendTo('body').fadeTo("slow", 0.8,function(){
		for(i=0;i<2;i++){
			for(m=0;m<num;m++){
				l=left*(m+1)+dw*m;
				t=top-distance+i*(height+2*distance);
				$('<div></div>',{
					id:'adb'+(m+i*num),
					width:dw,
					height:height,
					css:{
						position:'absolute',
						background:'#000 url(\''+src+'\') no-repeat '+m*(-dw)+'px '+(-i*height)+'px',
						display:'none',
						zIndex:'999',
						left:l,
						top:t
					}
				}).appendTo('body').animate({left:leftl+dw*m,top:top+height*i,opacity:'show'},'slow');
				$l.push(l);
				$t.push(t);
			}
		}
	}).click(function(){
		num=num*2;
		for(i=0;i<num;i++){
			$('#adb'+i).stop().animate({left:$l[i],top:$t[i],opacity:'hide'},'1000',function(){
				$(this).remove();
			});
		}
		$(this).remove();
	})
}

$(function(){
	$.showad('ie6.jpg',640,284,16,150,200);
})