<!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>
屏蔽IE6,提醒升级浏览器
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
微软呼吁用户停用IE6浏览器
微软建新网站呼吁用户停用IE6浏览器 http://ie6countdown.com/ &nbs
microsoft 职场 system 休闲 -
兼容ie6/ie7浏览器抖动的头部固定css
以往写过网页头部nav滚动时顶部固定但是在ie6/ie7中会出现先下滚动式,页面在颤抖,
html html5 css js web -
jquery1.9以上版本判断浏览器是否为IE6
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9。如果要同时使用:<!--[if lt IE 9]> <script src='jquery-1.9
浏览器 ie6 jquery $.browser $.browser.version $.support