中文(繁体)
網頁中有三個連接,實現的效果為:點擊連接彈出一個新的小窗口,在小窗口中顯示內容!視窗切換的時候帶過渡效果,而且視窗有關閉功能。
<html> <head> <title>點選連接顯示和隱藏過渡效果的圖層</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language= "JavaScript" type="text/JavaScript"> <!-- function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n .indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!( x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms<i>[n]; for (i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers<i>.document); if(!x && d.getElementById) x=d.getElementById(n ); return x; } function MM_showHideLayers() { //v6.0 var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3 ) if ((obj=MM_findObj(args<i>))!=null) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show' )?'visible':(v=='hide')?'hidden':v; } obj.visibility=v; } } //--> </script> </head> <body > <table width= "392" border="0" align="center" cellpadding="3" cellspacing="0"> <tr> <td width="17"><div align="center"></div></td > <td width="363"> <SPAN style="CURSOR: hand" onclick=Show(xk_poplod);MM_showHideLayers('er','','hide');MM_showHideLayers('san','','hide ')><a href="#" >註冊未使用的使用者</a></SPAN> <div id=xk_poplod style="FILTER: revealTrans(transition=12,duration=0.5) blendTrans(duration=0.5) ; POSITION: absolute; width: 271px; visibility: hidden;"> <table width="270" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666"> <tr> <td width ="268" height="24" bgcolor="#CCCCCC"><div align="center"><strong>註冊未使用的使用者</strong></div></td> </tr> <tr > <td bgcolor="#ECEDEB"><table width="94%" height=114 border=0 align="center" cellpadding=0 cellspacing=0 class=pop> <tbody> <tr> <td> <p > 您可以發50的倍數為手機儲值。現在儲值可得1.7元回饋優惠(7月31日前有效),詢025-83205608或10010!每用戶只可享有優惠價一次,送完即止. </p></td> </tr> <tr> <td> <div align=right> <span style="CURSOR: hand" onClick=Hide(xk_poplod)>關閉</span></div></td> </tr> </tbody> < /table></td> </tr> </table> </div> <div id=er style="FILTER: revealTrans(transition=12,duration=0.5) blendTrans(duration=0.5); POSITION: absolute; width: 271px; visibility: hidden;"> <table width="270" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666"> <tr> <td width="268" height ="24" bgcolor="#CCCCCC"><div align="center"><strong>新註冊的用戶</strong></div></td> </tr> <tr> <td bgcolor=" #ECEDEB"><table width="94%" height=114 border=0 align="center" cellpadding=0 cellspacing=0 class=pop> <tbody> <tr> <td> <p> 您可以寄50的倍數為手機儲值。現在儲值可得1.7元回饋優惠(7月31日前有效),詢問025-83205608或10010!每位使用者只可享有優惠價一次,送完即止.</p></td> </tr> <tr> <td> <div align=right> <span style="CURSOR: hand" onClick=Hide (er)>關閉</span></div></td> </tr> </tbody> </table></td> </tr> </table> </div> <div id=san style="FILTER: revealTrans(transition=12,duration=0.5) blendTrans(duration=0.5); POSITION: absolute; width: 271px; visibility: hidden;"> <table width="270" border="0" cellpadding= "0" cellspacing="1" bgcolor="#666666"> <tr> <td width="268" height="24" bgcolor="#CCCCCC"><div align="center"><strong>有過1次以上儲值的歷史的用戶</strong> </div></td> </tr> <tr> <td bgcolor="#ECEDEB"><table width="94%" height=114 border=0 align="center" cellpadding=0 cellspacing=0 class=pop> <tbody> <tr> <td> <p> 您現在用捷銀行動支付儲值,可獲得1.2元返款優惠(7月31日前有效) ,以後儲值還有優惠!詢025-83205608或10010 </p></td> </tr> <tr> <td> <div align=right> <span style="CURSOR: hand" onClick=Hide(san)>關閉</span ></div></td> </tr> </tbody> </table></td> </tr> </table> </div> <div align="center"></div> < div align="center"> <script language=JavaScript1.2> <!-- function Show(divid) { divid.filters.revealTrans.apply(); divid.style.visibility = "visible"; divid.filters.revealTrans .play(); } function Hide(divid) { divid.filters.revealTrans.apply(); divid.style.visibility = "hidden"; divid.filters.revealTrans.play(); } //--> </ script> </div></td> </tr> <tr> <td><div align="center"></div></td> <td> <SPAN style="CURSOR: hand" onclick= Show(er);MM_showHideLayers('xk_poplod','','hide');MM_showHideLayers('san','','hide')><a href="#">新註冊的用戶</a>< /SPAN> </td> </tr> <tr> <td><div align="center"></div></td> <td> <SPAN style="CURSOR: hand" onclick=Show(san );MM_showHideLayers('xk_poplod','','hide');MM_showHideLayers('er','','hide')><a href="#">有過1次以上充值的歷史的用戶</ a></SPAN> </td> </tr> </table> </body> </html>