用链接控制页面小窗口的打开和关闭_用链接打开的控制界面叫什么-优快云博客

本文介绍了一种使用HTML、CSS及JavaScript实现页面元素动态显示与隐藏的方法。通过编写简单的脚本，可以控制页面上的div元素逐渐展开或收起，达到平滑过渡的效果。此方案适用于创建网页弹窗、提示框等交互组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用链接控制页面小窗口的打开和关闭

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>show</title> <style type="text/css"> #show{ display:none; margin:0px auto; background-color:#FF0000; } #txt{ width:760px; height:30px; margin:0px auto; background-color:#efefef; } </style> </head> <body> <div id=show> </div> <div id=txt> <a href="#" onClick="show()">Open</a> <a href="#" onClick="show2()">Close</a> </div> <script type="text/javascript"> function show(){ if (!document.getElementById) return false; if (!document.getElementById("show")) return false; var show = document.getElementById("show"); show.style.width = "0px"; show.style.height = "0px"; show.style.display = "block"; movement = setTimeout("animation()",0) } function animation(){ if (!document.getElementById) return false; if (!document.getElementById("show")) return false; var show = document.getElementById("show"); var xpos = parseInt(show.style.width); var ypos = parseInt(show.style.height); if (xpos == 760 && ypos == 420){ return true; } if (xpos < 760){ xpos++; } if (xpos > 760){ xpos--; } if (ypos < 420){ ypos++; } if (ypos > 420){ ypos--; } show.style.width = xpos + "px"; show.style.height = ypos + "px"; movement = setTimeout("animation()",0); } function show2(){ if (!document.getElementById) return false; if (!document.getElementById("show")) return false; var show = document.getElementById("show"); show.style.width = "760px"; show.style.height = "420px"; show.style.display = "block"; movement = setTimeout("animation2()",0) } function animation2(){ if (!document.getElementById) return false; if (!document.getElementById("show")) return false; var show = document.getElementById("show"); var xpos = parseInt(show.style.width); var ypos = parseInt(show.style.height); if (xpos == 0 && ypos == 0){ return true; } if (xpos < 0){ xpos++; } if (xpos > 0){ xpos--; } if (ypos < 0){ ypos++; } if (ypos > 0){ ypos--; } show.style.width = xpos + "px"; show.style.height = ypos + "px"; movement = setTimeout("animation2()",0); } </script> </body> </html>