商务通关闭效果 

<!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>

 

posted on 2015-09-24 14:45  源人  阅读(204)  评论(0)  编辑  收藏  举报

导航