用js实现层的缓慢关闭与缓慢的打开

最新推荐文章于 2019-07-22 23:41:51 发布

wszlh1981

最新推荐文章于 2019-07-22 23:41:51 发布

阅读量1.7k

点赞数 1

文章标签： function c layer xhtml javascript html

本文链接：https://blog.csdn.net/wszlh1981/article/details/4575297

版权

先看看效果图：

1.窗口关闭前

窗口关闭前

2.点击关闭按钮，窗体将缓慢的关闭

窗体开始缓慢的关闭

3.最终窗体完全关闭，停靠在浏览器的右下角

这个是源码的下载地址：

http://download.csdn.net/source/1683011

以下是源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<HEAD>
<TITLE>窗体的改变</TITLE>
</HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!--
/*
页面最初的加载时，让对话框显示在最中间
*/
function load_ct(){
z.style.pixelLeft=document.documentElement.scrollLeft+(document.documentElement.clientWidth-z.offsetWidth)/2;
z.style.pixelTop=document.documentElement.scrollTop+(document.documentElement.clientHeight-z.offsetHeight)/2;
}

/*
可以鼠标拖动对话框
*/
var move_out=false; //定义变量，值为false
var z=document.getElementById("Layer");
var s=document.getElementById("Layer2");
var x,y; //定义变量

var w=z.offsetWidth;//层的原来宽度
var h=z.offsetHeight;//层的原来高度
var new_w=200;//关闭窗体后新的宽度
var new_h=25;//关闭窗体后新的高度
var c_w=w;
var c_h=h;

var speed=2;//变化的速度
var step=5;//步长

var top_new=0;
var left_new=0;
var top_old=0;
var left_old=0;
var top_c=0;
var left_c=0;

function up(){
move_out=false;
}

/*
关闭窗体
*/

function closeDIV(){
setTimeout("change_ck()",step);
}

s.style.display="block";
setTimeout("motion_left_top()",step);
}

}

/*
打开窗体
*/

function openDIV(){
    left_c=z.style.pixelLeft;//当前的left
    top_c=z.style.pixelTop;//当前的top

    setTimeout("motion_revert_top_left()",step);
}

function motion_revert_top_left(){

    if(top_c>top_old){
     top_c-=speed;
  if(top_c>top_old){
      z.style.pixelTop=top_c;
  }
  else{
      z.style.pixelTop=top_old;
   top_c=top_old;
  }
}
else if(top_c<top_old){
     top_c+=speed;
  if(top_c<top_old){
      z.style.pixelTop=top_c;
  }
  else{
      z.style.pixelTop=top_old;
   top_c=top_old;
  }
}
///

if(left_c>left_old){
     left_c-=speed;
  if(left_c>left_old){
      z.style.pixelLeft=left_c;
  }
  else{
      z.style.pixelLeft=left_old;
   left_c=left_old;
  }
}
else if(left_c<left_old){
     left_c+=speed;
  if(left_c<left_old){
      z.style.pixelLeft=left_c;
  }
  else{
      z.style.pixelLeft=left_old;
   left_c=left_old;
  }
}

    if(left_c==left_old&&top_c==top_old){
      s.style.display="none";
      setTimeout("afresh_open()",step);
}
else{
      setTimeout("motion_revert_top_left()",step);
}
}

/*
从新打开窗口
*/

window.οnlοad=load_ct;//页面加载时，窗体显示在最中间
document.οnmοusedοwn=down;//当鼠标按下时执行down()函数
document.οnmοuseup=up;

//-->
</SCRIPT>

</BODY>
</HTML>

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

另一种效果：