<html>
<head>
<title> 层的切换xux </title> </head>
<body bgcolor="#FFFFFF">
<STYLE type=TEXT/CSS>
div { FILTER: revealTrans(Duration=1.0,Transition=23) visibility:hide}
</STYLE>
<script>
var cur = 1;
var str = "1234";
var arr = []
function set_menu()
{
temp = str.replace(cur, "");
arr = temp.split(""); order = parseInt(Math.random()*temp.length);
eval("layer" + cur).style.visibility="hidden";
var elem = eval("layer" + arr[order]);
elem.filters.revealTrans.apply();
elem.style.visibility="visible";
elem.filters.revealTrans.play();
cur = arr[order];
}
</script>
<p OnClick="set_menu();"> 点击-随机产生切换层效果 </p> <div id="layer1" style="position:absolute; width:200px; height:115px; background-color: #336699; layer-background-color: #33FFFF; border: 1px none #000000; left: 50; top: 50; visibility: visible" align="center"> 这是A层 </div> <div id="layer2" style="position:absolute; width:200px; height:115px; background-color: #FF9900; layer-background-color: #FF9900; border: 1px none #000000; left: 50; top: 50; visibility: hidden" align="center"> 这是B层 </div><div id="layer3" style="position:absolute; width:200px; height:115px; background-color: #00FF00; layer-background-color: #FF9900; border: 1px none #000000; left: 50; top: 50; visibility: hidden" align="center"> 这是C层 </div> <div id="layer4" style="position:absolute; width:200px; height:115px; background-color: #0000FF; layer-background-color: #FF9900; border: 1px none #000000; left: 50; top: 50; visibility: hidden" align="center"> 这是D层 </div> </body>
</html>
<head>
<title> 层的切换xux </title> </head>
<body bgcolor="#FFFFFF">
<STYLE type=TEXT/CSS>
#layer1 { FILTER: revealTrans(Duration=1.0,Transition=23) visibility:hide}
#layer2 { FILTER: revealTrans(Duration=1.0,Transition=23) visibility:hide}
#layer3 { FILTER: revealTrans(Duration=1.0,Transition=23) visibility:hide}
#layer4 { FILTER: revealTrans(Duration=1.0,Transition=23) visibility:hide}
</STYLE>
<script>
var Index=1;
var IndexNext;
function set_menu()
{
IndexNext=Index+1;
if(IndexNext>4)IndexNext=1;
var x1=document.getElementById("layer"+Index);
var x2=document.getElementById("layer"+IndexNext);
if(x1.style.visibility=="hidden")
{
x1.filters.revealTrans.apply();
x1.style.visibility="visible";
x1.filters.revealTrans.play();
}
else{
x1.filters.revealTrans.apply();
x1.style.visibility="hidden" ;
x1.filters.revealTrans.play();
}
if(x2.style.visibility=="hidden")
{
x2.filters.revealTrans.apply();
x2.style.visibility="visible";
x2.filters.revealTrans.play();
}
else{
x2.filters.revealTrans.apply();
x2.style.visibility="hidden" ;
x2.filters.revealTrans.play();
}
if(Index<4)
Index++;
else
Index=1;
}
</script>
<p OnClick="set_menu();"> 点击-随机产生切换层效果 </p> <div id="layer1" style="position:absolute; width:200px; height:115px; background-color: #336699; layer-background-color: #33FFFF; border: 1px none #000000; left: 50; top: 50; visibility: visible" align="center"> 这是A层 </div> <div id="layer2" style="position:absolute; width:200px; height:115px; background-color: #FF9900; layer-background-color: #FF9900; border: 1px none #000000; left: 50; top: 50; visibility: hidden" align="center"> 这是B层 </div> <div id="layer3" style="position:absolute; width:200px; height:115px; background-color: #ff0000; layer-background-color: #FF9900; border: 1px none #000000; left: 50; top: 50; visibility: hidden" align="center"> 这是C层 </div>
<div id="layer4" style="position:absolute; width:200px; height:115px; background-color: #0000ff; layer-background-color: #FF9900; border: 1px none #000000; left: 50; top: 50; visibility: hidden" align="center"> 这是D层 </div>
</body>
</html>