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

解决方案 »

  1.   

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

  2.   

    showbo老兄的不错,lsc1202001老兄的是随机的啊,都不错,统统给分