<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="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 ></div>';//创建字符串
for(var i=0;i<4;i++){
str+='<div ></div>';
}
for(var i=0;i<4;i++){
if(i==0) str+='<div ></a></div>';
if(i==1) str+='<div ></a></div>';
if(i==2) str+='<div ></a></div>';
if(i==3) str+='<div ></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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="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 ></div>';//创建字符串
for(var i=0;i<4;i++){
str+='<div ></div>';
}
for(var i=0;i<4;i++){
if(i==0) str+='<div ></a></div>';
if(i==1) str+='<div ></a></div>';
if(i==2) str+='<div ></a></div>';
if(i==3) str+='<div ></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>
相关文章：