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

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

cds27

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

阅读量1.9k

点赞数

分类专栏： Javascript 技巧文章标签： javascript button div generator null function

本文链接：https://blog.csdn.net/cds27/article/details/1771446

版权

Javascript 技巧专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

函数调用说明：

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.csdn.net/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 οnclick="closeWin('awin')">Close</BUTTON>
   </p>
  </DIV>

cds27

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
[javascript技巧] 模拟动画开/关窗口

我写一组函数，用来模拟打开和关闭窗口的动画效果。函数调用说明：closeWin(id)，id为div的id字符串，同时div要在显示状态才会执行。openWin(id)，id为div的id字符串，同时div要在隐藏状态才会执行。下面有代码实例，另外也可以从这个地址看到效果：http://cds.gameres.com/samples/javascriptTech/donghua.htm
复制链接

扫一扫