当前位置:网站首页 - 特效代码 - 窗口特效
  • <html> <head> <script> /* By Auntion QQ 82874972 使用方法 调用效果: Effect(1,2); 其中1为: 被改变对象的id 其中2为: 控制容器的id 可在使用: this.parentNode.id 取得(父标签的id) 注意给对象ID的时候一定不要重复. */ function $G(Read_Id) { return document.getElementById(Read_Id) } function Effect(ObjectId,parentId){ if ($G(ObjectId).style.display == 'none'){ Start(ObjectId,'Opens'); $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>关闭</a>" }else{ Start(ObjectId,'Close'); $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>打开</a>" } } function Start(ObjId,method){ var BoxHeight = $G(ObjId).offsetHeight; //获取对象高度 var MinHeight = 5; //定义对象最小高度 var MaxHeight = 130; //定义对象最大高度 var BoxAddMax = 1; //递增量初始值 var Every_Add = 0.15; //每次的递(减)增量 [数值越大速度越快] var Reduce = (BoxAddMax - Every_Add); var Add = (BoxAddMax + Every_Add); if (method == "Close"){ var Alter_Close = function(){ //构建一个虚拟的[递减]循环 BoxAddMax /= Reduce; BoxHeight -= BoxAddMax; if (BoxHeight <= MinHeight){ $G(ObjId).style.display = "none"; window.clearInterval(BoxAction); } else $G(ObjId).style.height = BoxHeight; } var BoxAction = window.setInterval(Alter_Close,1); } else if (method == "Opens"){ var Alter_Opens = function(){ //构建一个虚拟的[递增]循环 BoxAddMax *= Add; BoxHeight += BoxAddMax; if (BoxHeight >= MaxHeight){ $G(ObjId).style.height = MaxHeight; window.clearInterval(BoxAction); }else{ $G(ObjId).style.display= "block"; $G(ObjId).style.height = BoxHeight; } } var BoxAction = window.setInterval(Alter_Opens,1); } } </script> <style> body,div,table { font-size:12px;} #control{ width:200; background-color:#ccc; font-size:12px; font-color:#333333; text-align:center; } #control a { font-weight:900; line-height:30px; color:#333333; } .test{ height:130;width:200;background-color:#ccc;display:block;overflow:hidden; } .STYLE1 { font-size: 8px; color: #FFFFFF; } </style> </head> <body> <div id="control"> <table width="100%" height="30" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" bgcolor="#2DD5FF" id="testtab"><a href="#" onClick="Effect('test',this.parentNode.id);">关闭</a></td> </tr> </table> </div> <div id="test" class="test"> <table width="100%" height="130" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE"> <tr> <td colspan="3" align="center" valign="top">这<br> 江<br> 西<br> 南<br> 昌<br> 网<br> 络<br> 公<br> 司<br></td> </tr> </table> </div> <div id="control"> <table width="100%" height="10" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" valign="bottom" bgcolor="#00C0F0"><span class="STYLE1">▲</span></td> </tr> </table> </div> <br> <div id="control"> <table width="100%" height="30" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" bgcolor="#2DD5FF" id="test1tab"><a href="#" onClick="Effect('test1',this.parentNode.id);">关闭</a></td> </tr> </table> </div> <div id="test1" class="test"> <table width="100%" height="130" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE"> <tr> <td colspan="3" align="center" valign="top">这<br> 欧<br> 莱<br> 凯<br> 主<br> 题<br> 网<br> </td> </tr> </table> </div> <div id="control"> <table width="100%" height="10" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" valign="bottom" bgcolor="#00C0F0"><span class="STYLE1">▲</span></td> </tr> </table> </div> </body> </html>