javascript淡入淡出窗口切换

来源：互联网发布：杭州php学费多少编辑：程序博客网时间：2024/05/18 01:46

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<title>淡入淡出...</title>
<style type="text/css">
div{width:250px;height:250px;}
div#main{position:relative;border:1px solid red;}
div#a{position:absolute;top:0;left:0;background-color:#ccc;color:red;opacity:1;filter:alpha(opacity=100);z-index:1;}
div#b{position:absolute;top:0;left:0;background-color:#ccc;color:blue;opacity:0;filter:alpha(opacity=0);z-index:0;}
</style>
<script type="text/javascript">
var timer = null;
var ele_a = ele_b = null;
function $(id){return document.getElementById(id);}
function fade(a,b) {
ele_a = $(a);
ele_b = $(b);
if(!ele_a || !ele_b){return;}
if(document.all) {
ele_a.filters.alpha.opacity = 100;
ele_b.filters.alpha.opacity = 0;
}else{
ele_a.style.opacity = 1;
ele_b.style.opacity = 0;
}
ele_a.style.zIndex = 1;
ele_b.style.zIndex = 0;
fade_opacity();
}
function fade_opacity() {
var ifstop = false;
if(document.all) {
if(ele_a.filters.alpha.opacity > 0) {
ele_a.filters.alpha.opacity -= 10;
}else if(ele_b.filters.alpha.opacity < 100) {
ele_b.filters.alpha.opacity += 10;
}else{
ifstop = true;
}
} else {
if(ele_a.style.opacity > 0) {
ele_a.style.opacity -= 0.1;
}else if(ele_b.style.opacity < 1){
ele_b.style.opacity = parseFloat(ele_b.style.opacity) + 0.1;
}else{
ifstop = true;
}
}
if(ifstop==true) {
window.clearTimeout(timer);
ele_b.style.zIndex = parseInt(ele_a.style.zIndex) + 1;
}else{
timer = window.setTimeout('fade_opacity()', 100);
}
}
</script>
</head>
<body>
<div id="main">
<div id="a">this is div-a<input type="text" size="20" /></div>
<div id="b">this is div-b<textarea></textarea></div>
</div>
<input type="button" value="A->B" onclick="fade('a','b');" />
<input type="button" value="B->A" onclick="fade('b','a');" />
</body>
</html>

效果图为