js 实现窗体缓慢打开与关闭

最新推荐文章于 2018-08-31 18:04:30 发布
最新推荐文章于 2018-08-31 18:04:30 发布
阅读量188 收藏
点赞数
分类专栏： JAVAscript 文章标签： C C++ C# XHTML UP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ganlangreen/article/details/83463637
版权
<!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>


<BODY>
<div id="Layer" style="position:absolute; z-index:500; overflow:hidden; left: 0px; top: 0px;">

<img src="yidong.jpg" id="img1" style="position:absolute; z-index:4; left: 1px; top: 3px; cursor:move" title="移动窗体"/>
<div id="Layer2" style="position:absolute; display:none; z-index:5; left: 180px; top: 3px; cursor:hand">
<img src="da.jpg" id="img2" onClick="openDIV()" title="打开窗体"/>
</div>

<img src="guanbi.jpg" id="img3" style="position:absolute; z-index:4; left: 345px; top: 2px; cursor:hand" onClick="closeDIV()" title="关闭窗体"/>
<img src="ceng.jpg" id="img4" /></div>


<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 move(){//创建函数
if(move_out){
if(event.button==move_out){ //判断当前鼠标是否是左键按下状态
z.style.pixelLeft=temporarily1+event.clientX-x; //获取当前鼠标的位置
z.style.pixelTop=temporarily2+event.clientY-y; //获取当前鼠标的位置
return false;
}
}
}
function down(){// 创建自定义函数，实现文字的移动
if(event.srcElement.id=="img1"){//应用event对象中的srcElement属性获取当前事件的对象
move_out=true;
temporarily1=z.style.pixelLeft;
temporarily2=z.style.pixelTop;
x=event.clientX; //获取鼠标在窗口中的X位置
y=event.clientY;//获取鼠标在窗口中的Y位置
document.οnmοusemοve=move; //当鼠标移动时执行move()函数
}else{
move_out=false;
}
}

function up(){
move_out=false;
}


/*
关闭窗体
*/

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

function change_ck(){
//改变窗体的宽
c_w-=speed;
if(c_w>=new_w){
z.style.width=c_w;
}
else{
z.style.width=new_w;
c_w=new_w;
}

//改变窗体的高
c_h-=speed;
if(c_h>=new_h){
z.style.height=c_h;
}
else{
z.style.height=new_h;
c_h=new_h;
}

if(c_w!=new_w||c_h!=new_h){
setTimeout("change_ck()",step);
}
else{
//表示窗体已经停止缩小，现在要移动窗体到右下脚
top_new=document.documentElement.scrollTop+document.documentElement.clientHeight-new_h;//要移动后的top
left_new=document.documentElement.scrollLeft+document.documentElement.clientWidth-new_w;//要移动后的left
left_old=z.style.pixelLeft;//保存原来的left
top_old=z.style.pixelTop;//保存原来的top
top_c=top_old;//top变量
left_c=left_old;//left变量

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

}


function motion_left(){
left_c+=speed;
if(left_c<=left_new){
z.style.pixelLeft=left_c;
setTimeout("motion_left()",step);
}
else{
z.style.pixelLeft=left_new;
left_c=left_new;
setTimeout("motion_top()",step);
}
}

function motion_top(){
top_c+=speed;
if(top_c<=top_new){
z.style.pixelTop=top_c;
setTimeout("motion_top()",step);
}
else{
z.style.pixelTop=top_new;
top_c=top_new;
}
}


/*
打开窗体
*/

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

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


function motion_revert_top(){
if(top_c>top_old){
top_c-=speed;
if(top_c>top_old){
z.style.pixelTop=top_c;
setTimeout("motion_revert_top()",step);
}
else{
z.style.pixelTop=top_old;
top_c=top_old;
setTimeout("motion_revert_left()",step);
}
}
else if(top_c<top_old){
top_c+=speed;
if(top_c<top_old){
z.style.pixelTop=top_c;
setTimeout("motion_revert_top()",step);
}
else{
z.style.pixelTop=top_old;
top_c=top_old;
setTimeout("motion_revert_left()",step);
}
}
else if(top_c==top_old){
setTimeout("motion_revert_left()",step);
}
}

function motion_revert_left(){

if(left_c>left_old){
left_c-=speed;
if(left_c>left_old){
z.style.pixelLeft=left_c;
setTimeout("motion_revert_left()",step);
}
else{
z.style.pixelLeft=left_old;
left_c=left_old;
s.style.display="none";
setTimeout("afresh_open()",step);
}
}
else if(left_c<left_old){
left_c+=speed;
if(left_c<left_old){
z.style.pixelLeft=left_c;
setTimeout("motion_revert_left()",step);
}
else{
z.style.pixelLeft=left_old;
left_c=left_old;
s.style.display="none";
setTimeout("afresh_open()",step);
}
}
else if(left_c==left_old){
s.style.display="none";
setTimeout("afresh_open()",step);
}
}


/*
从新打开窗口
*/

function afresh_open(){
//改变窗体的宽
c_w+=speed;
if(c_w<=w){
z.style.width=c_w;
}
else{
z.style.width=w;
c_w=w;
}

//改变窗体的高
c_h+=speed;
if(c_h<=h){
z.style.height=c_h;
}
else{
z.style.height=h;
c_h=h;
}

if(c_w!=w||c_h!=h){
setTimeout("afresh_open()",step);
}
}


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

//-->
</SCRIPT>


</BODY>
</HTML>
千里兵峰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用js实现的窗体的缓慢关闭与缓慢打开
09-21
用js实现的窗体的缓慢关闭与缓慢打开，用js实现的窗体的缓慢关闭与缓慢打开
asp.net窗体的打开和关闭(输出js)
01-01
代码如下://打开新的窗体 Response.Redirect(“WebMain.aspx”); //弹出一个新窗体 Response.Write(“[removed]window.open(\”WebMain.aspx\”)[removed]”) //弹出一个只有确定按钮的提示框 Response.Write(“...
JS打开模态窗口showModalDialog
A_Runner的博客
08-31 5712
“人人尽说江南好，游人只合江南老” 今天在使用谷歌浏览器通过JS打开模态窗口时，出现如下错误： Uncaught TypeError: window.showModalDialog is not a function 出现该问题的原因是，谷歌浏览器已经不支持该方法了。 解决方法： //兼容谷歌浏览器，如果不能直接打开模态窗口，则自定义一个窗口 if(!...
JS 页面加载慢 的问题分析---转
liumuqi657的专栏
03-04 2496
巧妙解决js内容调用导致页面加载慢的问题2009-6-14 0:17:003推荐很多内容管理系统、论坛系统都提供了js内容调用的功能。其实，采取js的方式来调用内容是最不科学的一种方法，不但影响SEO，而且会导致页面加载的时候有“卡”的现象。虽然如此，但很多时候却不得不用这种方法。于是，只好想办法解决这个“卡”的问题了。一、现象分析先举个例子来说明一
用js实现层的缓慢关闭与缓慢的打开
wszlh1981的专栏
09-21 1750
先看看效果图：     1.窗口关闭前                2.点击关闭按钮，窗体将缓慢的关闭                  3.最终窗体完全关闭，停靠在浏览器的右下角              这个是源码的下载地址：http://download.csdn.net/source/1683011  以下是源码： http
js关闭子窗体刷新父窗体实现方法
12-08
另一种情况是使用`window.showModalDialog()`方法打开子窗口，这个方法会显示一个模态对话框，用户必须关闭对话框才能与父窗口进行交互。当子窗口关闭时，可以设置`window.returnValue`来传递信息给父窗口，如下所示...
C#多窗体显示与关闭
12-10
"C#多窗体显示与关闭"这个主题主要涵盖了如何在C#环境中设计和实现用户界面中的多个窗口，并有效地控制它们的显示和关闭。在登录模块和退出模块的设计中，这一技巧尤为重要。 首先，让我们了解C#中的窗体（Form）。...
asp.net使用 js 转向Url，刷新父窗口，关闭当前窗口通用封装类
11-02
asp.net使用 js 弹出JavaScript小窗口，弹出消息框并且转向到新的URL，回到历史页面，关闭当前窗口，刷新父窗口等
apache 报apache 报 The server is temporarily unable to service your request due to maintenance downtim
热门推荐
pdw2009的专栏
11-17 4万+
apache 报 The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later. 解决办法
18.6.6日报，layer太多造成卡慢
weolar的专栏
06-07 1522
1，跟进http://www.zhangxinxu.com/study/201005/css3-solar-system.html卡慢问题。发现大部分cpu时间都在bitblt上。原因是这网页开启了很多layer，而且每个layer还特别大。导致性能甚至不如wke。bool CompositingLayerAssigner::needsOwnBacking里可以调节哪些需要开启加速层。不过这里改了...
Js实现窗口延迟10秒后自动关闭
die3088的博客
05-12 1293
function closeit() //等待10秒自动关闭窗口{ 　　setTimeout("window.opener=null;window.open('','_self');self.close();return false;",10000) //毫秒 　　return false;} 转载于:https://www.cnblogs.com/zjhhz17909/arc...
js右下角弹出窗口,点击可关闭效果
04-15 3657
body { background:#333333;} #winpop { width:200px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #999999; margin:0; padding:1px; overflow:hidden;display:none; background:#FFFFFF}
js实现div层缓慢收缩与展开的方法
weixin_30509393的博客
12-20 844
引脚本之家 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equi...
怎样用JS实现关闭当前窗口
XiNanHeiShao的专栏
01-14 416
http://blog.sina.com.cn/s/blog_49351775010105k9.html
vb怎么打开新窗体并关闭原有窗体
最新发布
06-03
在 VB 中打开新窗体并关闭原有窗体可以使用以下步骤： 1. 在需要打开新窗体并关闭原有窗体的按钮的 Click 事件中，先关闭当前窗体： ``` Unload Me ``` 2. 然后使用以下代码打开新窗体： ``` Form2.Show() ``` 其中，`Form2` 是你要打开的新窗体的名称，可以根据实际情况进行修改。 注意：在关闭当前窗体之后，其它窗体可能无法访问当前窗体的变量、属性或方法，因此需要在关闭窗体之前将这些需要传递给新窗体的信息保存到其它变量中，或者使用公共模块中的变量来保存这些信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值