<!DOCTYPE HTML> <html> <head> <title>商务通关闭效果</title> <meta name="description" content="商务通关闭效果（缩小到消失）" /> </head> <body> <style> #w{width:450px;height:360px;margin:0 auto;border:1px solid #514654;background:url(http://swt.027abl.com/swtr2.gif) no-repeat center;display:block;} </style> <img id="w" src="http://swt.027abl.com/swtr2.gif" width="450" height="360" /> <script> var oD=document.getElementById("w"); var w=parseInt(getComputedStyle(oD,false).width); var h=parseInt(getComputedStyle(oD,false).height); //var h=Number(getComputedStyle(oD,false).height);//返回NaN oD.onclick=function(){ setInterval("slow()",1); }; function slow(){ if(w>0 && h>0){ w-=2.75; h-=2.2; //alert(w+"px"); oD.style.width=w+"px"; oD.style.height=h+"px"; //alert(oD.style.width); } else{ oD.style.display="none"; } } </script> </body> </html>
修改后：断点display：none ; 无需定义全局变量！
<!DOCTYPE HTML> <html> <head> <title>商务通关闭效果</title> <meta name="description" content="商务通关闭效果（缩小到消失）" /> </head> <body> <style> #w{width:450px;height:360px;margin:0 auto;border:1px solid #514654;background:url(http://swt.027abl.com/swtr2.gif) no-repeat center;display:block;} </style> <img id="w" src="http://swt.027abl.com/swtr2.gif" width="450" height="360" /> <script> oD.onclick=function(){ var oD=document.getElementById("w"); var w=parseInt(getComputedStyle(oD,false).width); var h=parseInt(getComputedStyle(oD,false).height); //var h=Number(getComputedStyle(oD,false).height);//返回NaN var a=setInterval("slow()",1); clearInterval(a); }; function slow(){ if(w>0 && h>0){ w-=2.75; h-=2.2; //alert(w+"px"); oD.style.width=w+"px"; oD.style.height=h+"px"; //alert(oD.style.width); } else{ oD.style.display="none"; } } </script> </body> </html>
兼容IE效果
<!DOCTYPE HTML> <html> <head> <title>商务通关闭效果</title> <meta name="description" content="商务通关闭效果（缩小到消失）" /> </head> <body> <style> #w{width:450px;height:360px;margin:0 auto;border:1px solid #514654;background:url(http://swt.027abl.com/swtr2.gif) no-repeat center;display:block;} </style> <img id="w" src="http://swt.027abl.com/swtr2.gif" width="450" height="360" /> <script> var oD=document.getElementById("w"); oD.onclick=function(){ if(oD.currentStyle){ var w=parseInt(oD.currentStyle.width); var h=parseInt(oD.currentStyle.height); }else{ var w=parseInt(getComputedStyle(oD,false).width); var h=parseInt(getComputedStyle(oD,false).height); } var a=setInterval(function(){ if(w>0 && h>0){ w-=2.75; h-=2.2; oD.style.width=w+"px"; oD.style.height=h+"px"; } else{ oD.style.display="none"; clearInterval(a); } },1); }; </script> </body> </html>