zoukankan html css js c++ java

商务通关闭效果

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

查看全文

相关阅读:
用最有效率的方法计算2乘以8？
Math.round(11.5) 等于多少？Math.round(-11.5)等于多少？
swtich 是否能作用在byte 上，是否能作用在long 上，是否能作用在String上？
解释内存中的栈(stack)、堆(heap)和静态区(static area)的用法。
&和&&的区别？
int和Integer有什么区别？
Java有没有goto？
collect diff() 方法
 contains() 指定集合中是否含有此项目
 collect集合实例方法将多个数组组成的集合合成单个一维数组集合-- collapse

原文地址：https://www.cnblogs.com/dream-w/p/4835311.html