您的位置：首页 > Web前端 > JavaScript

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

2007-09-04 11:01 357 查看

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

函数调用说明：

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;
}
}

function openWin(id) {
var elem=document.getElementById(id);
if(elem==null) return;
if(window.operatingWin) {
elem=window.operatingWin;
elem.closing++;
}
else {
if(elem.style.display!="none") return;
elem.style.display="block";
}

if(elem.closing<elem.maxClosing) {
elem.style.width=elem.offsetWidth+elem.offWidth;
elem.style.height=Number(elem.offsetHeight)+Number(elem.offHeight);
window.operatingWin=elem;
setTimeout("openWin('"+id+"')", 10);
}
else {
elem.style.width=elem.maxWidth;
elem.style.height=elem.maxHeight;
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 onclick="closeWin('awin')">Close</BUTTON>
</p>
</DIV>

<BUTTON onclick="openWin('awin')">Open</BUTTON>
</BODY>
</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航