[javascript技巧] 模拟动画开/关窗口

最新推荐文章于 2021-08-03 22:12:46 发布

原创最新推荐文章于 2021-08-03 22:12:46 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #button #div #generator #null #function

Javascript 技巧专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一组使用JavaScript实现的函数，这些函数可以模拟网页中窗口的打开和关闭动画效果。通过逐步调整窗口大小来实现平滑过渡，适用于需要增强用户体验的场景。

我写一组函数，用来模拟打开和关闭窗口的动画效果。

函数调用说明：

closeWin(id)，id为div的id字符串，同时div要在显示状态才会执行。
openWin(id)，id为div的id字符串，同时div要在隐藏状态才会执行。

下面有代码实例，另外也可以从这个地址看到效果：http://cds.gameres.com/samples/javascriptTech/donghua.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Sank Orange">
<META NAME="Keywords" CONTENT="javascript技巧">
<META NAME="Description" CONTENT="模拟动画开/关窗口">
<script>
function closeWin(id) {
var elem=document.getElementById(id);
if(elem==null || elem.style.display=="none") return;
if(window.operatingWin) {
  elem=window.operatingWin;
  elem.closing--;
}
else {
  if(elem.style.display=="none") return;
  elem.closing=15;
  elem.maxClosing=15;
  elem.offWidth=elem.offsetWidth/(elem.closing+1);
  elem.offHeight=elem.offsetHeight/(elem.closing+1);
  elem.maxWidth=elem.offsetWidth;
  elem.maxHeight=elem.offsetHeight;
}

if(elem.closing>0) {
  if(elem.offsetWidth-1>elem.offWidth) elem.style.width=elem.offsetWidth-elem.offWidth;
  if(elem.offsetHeight-1>elem.offHeight) elem.style.height=elem.offsetHeight-elem.offHeight;
  window.operatingWin=elem;
  setTimeout("closeWin('"+id+"')", 10);
}
else {
  elem.style.display="none";
  window.operatingWin=null;
}
}

</script>
<style>
.Win {
position: absolute;
border: 2px outset #CCCCCC;
background-color: #f0f0f0;
padding: 10px;
left: 13%;
font-size: medium;
overflow: hidden;
top: 10%;
}
button {
font-size: medium;
}
</style>
</HEAD>

<BODY>
  <DIV class="Win" id="awin">
   <DIV>
    <p align="center"><a href="http://blog.youkuaiyun.com/cds27/">Sank Orange Blog</a></p>
    <p align="center"><a href="http://cds.gameres.com/samples/javascriptTech/donghua.html">从这里进入看实际页面效果</a></p>
    <p align="center">点下面按钮关闭窗口</p>
   </DIV>
   <p align="center">
    <BUTTON onclick="closeWin('awin')">Close</BUTTON>
   </p>
  </DIV>