<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="​http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">​http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js​​​" type="text/javascript"></script><style type="text/css"> #ie6Gray{ 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; outline:0;/*关键,设置a标签为块状显示*/} .bar{ background:#000 url(ie6.png) no-repeat 0 0; display:none; z-index:999;/*关键,设置层级比背景高一级*/ } </style> </head> <body> <div style="width:1000px; height:2000px; margin:0 auto"> <script type="text/javascript"> function ie6Halt(){ var str='<div id="ie6Gray"></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 i=0;i<4;i++){ if(i==0) str+='<div id="ab'+(i+4)+'" class="bar" style="background-position:'+i*(-160)+'px -142px"><a href="​ ​www.google.com/chrome">​http://www.google.com/chrome​​​" target="_blank" hideFocus="true"></a></div>';if(i==1) str+='<div id="ab'+(i+4)+'" class="bar" style="background-position:'+i*(-160)+'px -142px"><a href="​ ​​http://www.firefox.com​​​" target="_blank" hideFocus="true"></a></div>';if(i==2) str+='<div id="ab'+(i+4)+'" class="bar" style="background-position:'+i*(-160)+'px -142px"><a href="​ ​​http://www.browserforthebetter.com/download.html​​​" target="_blank" hideFocus="true"></a></div>';if(i==3) str+='<div id="ab'+(i+4)+'" class="bar" style="background-position:'+i*(-160)+'px -142px"><a href="​ ​​http://www.apple.com/safari/download/​​" target="_blank" hideFocus="true"></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})//强制浏览器滚动到文档顶部 $('#ie6Gray').height($(document).height()).fadeTo("slow", 0.8,function(){//背景设置为文档高度并渐显 for(var i=0;i<8;i++){ $('#ab'+i).css({left:$leftlist[i%4],top:$toplist[i]}).animate({left:$leftli[i%4],top:$topli[i],opacity:'show'},'slow') }//通过css给予初始位置,然后animate动画进行到结束位置并显示 }).click(function(){ for(var i=0;i<8;i++){ $('#ab'+i).stop().animate({left:$leftlist[i%4],top:$toplist[i],opacity:'hide'},'1000',function(){ $(this).remove(); }); } //$(this).remove(); })//添加背景点击事件,点击后动画到开始位置并remove移除 } $(function(){//文档加载完成后执行 //if($.browser.msie&&parseInt($.browser.version,10)<7)//判断ie6 ie6Halt(); }) </script> </div> </body> </html>