`
橄榄绿
  • 浏览: 277278 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

CC++C#XHTMLUP 
阅读更多
<!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.onmousemove=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.onload=load_ct;//页面加载时，窗体显示在最中间
document.onmousedown=down;//当鼠标按下时执行down()函数
document.onmouseup=up;

//-->
</SCRIPT>



</BODY>
</HTML>
分享到：
| Hibernate抓取策略
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    在JavaScript（简称JS）中，实现窗体的缓慢关闭与缓慢打开主要涉及到动画效果的创建。这通常通过改变元素的CSS属性，如`opacity`（透明度）或`transform`（变换）来实现，并利用`setTimeout`或`...

    C# winform 子窗体调用父窗体函数实现关闭该窗体打开另一个窗体

    C# winform 子窗体调用父窗体函数实现关闭该窗体打开另一个窗体；在父窗体分From1内嵌一个panel1，在panel1里载入From2，点击在子窗体From2中的按钮，清除panel1里的From2，新载入From3，点击在子窗体From3中的按钮...

    C# Winform在MDI中打开一个子窗体关闭上一个子窗体

    本文将深入探讨如何在MDI环境中控制子窗体的显示与管理，特别是如何实现“在打开新子窗体时自动关闭当前存在的子窗体”的功能。 ### MDI基础概念 MDI架构的核心是`MDIForm`，即作为所有子窗体容器的主窗体。当一个...

    打开一个窗体、就关闭一个窗体

    4. **实现“打开一个窗体、就关闭一个窗体”**：这个需求可能意味着在打开新窗体时，希望关闭当前活动窗体。我们可以根据上下文选择合适的方式实现。以下是一个简单的例子： ```csharp private void OpenNewForm_...

    wpf窗体打开和关闭的动画效果

    以下是关于如何在 WPF 中实现窗体打开和关闭动画效果的详细知识： 一、基本概念 1. **动画（Animation）**：WPF 的动画系统允许对象的属性随着时间改变，从而实现动态效果。动画可以基于时间、事件或其他动画来触发...

    C#winform判断窗体是否打开

    - **利用事件监听窗体状态变化**：监听窗体的`Closed`或`Closing`事件，可以在窗体关闭时执行清理工作，例如从集合中移除该窗体的引用。 总之，C# WinForm中的窗体管理是一项重要的技能，尤其是在MDI应用程序中。...

    winform判断窗体是否打开

    4. **根据判断结果打开或关闭子窗体**： 当用户触发某个操作（如点击按钮）时，调用`IsChildFormOpen`方法检查子窗体状态。如果子窗体已打开，我们可以选择不执行任何操作或显示提示信息；如果未打开，我们就实例化...

    C#多窗体显示与关闭

    "C#多窗体显示与关闭"这个主题主要涵盖了如何在C#环境中设计和实现用户界面中的多个窗口，并有效地控制它们的显示和关闭。在登录模块和退出模块的设计中，这一技巧尤为重要。 首先，让我们了解C#中的窗体（Form）。...

    C#实现窗体打开动画效果

    在C#编程中，我们可以利用Windows Forms库中的控件和事件来实现丰富的窗体动画效果。窗体动画不仅能够提升用户的交互体验，还能使应用程序看起来更专业。本篇将详细介绍如何实现标题中提及的几种动画效果，包括淡入...

    窗体打开关闭的动态效果

    "窗体打开关闭的动态效果"这一主题主要涉及如何在软件开发中实现窗口平滑、流畅的过渡动画。 在Windows应用程序开发中，如使用C#或Visual Basic .NET，我们可以利用.NET Framework提供的Windows Forms或WPF...

    在一个窗体中打开另一个窗体

    以上就是实现“在一个窗体中打开另一个窗体”的基本步骤和技术要点。实际应用中，你可能还需要考虑窗体间的通信、关闭事件的处理以及多线程等问题，这些都是窗体管理中的重要组成部分。对于初学者来说，熟练掌握这一...

    打开新的窗体，关闭当前窗体的一个简单方法，更改主程序地方很少。不妨一试哦

    在.NET Framework中，尤其是使用C#进行Windows Forms开发时，我们常常需要在应用程序中实现打开新的窗体并关闭当前窗体的功能。这个问题在标题和描述中已经提及，这里将详细解释如何实现这一操作，并分享一个简洁的...

    delphi中判断子窗体是否打开

    总之，在Delphi的MDI应用程序开发中，判断子窗体是否打开是常见的需求，可以通过遍历MDI父窗体的子窗体列表来实现。同时，为了提供良好的用户体验，还需要正确管理窗口菜单，以便用户能方便地操作已打开的子窗体。

    WinForm 关闭子窗体时刷新父窗体的数据

    当创建子窗体并打开它时，我们可以通过`ShowDialog()`方法来实现模态对话框效果，这意味着用户必须先关闭子窗体才能继续与父窗体交互。这样，我们可以在子窗体关闭的那一刻更新父窗体的数据。 1. **事件处理**： -...

    C#阻止窗体关闭判断关闭条件阻止窗体关闭.rar

    标题"阻止窗体关闭判断关闭条件阻止窗体关闭.rar"所描述的场景正是如此，它涉及到窗体关闭事件的处理以及设置自定义的关闭条件。下面我们将详细讨论如何实现这个功能。 首先，我们需要了解`Form`类中的`FormClosing...

    js实现浮动窗体实例

    js实现浮动窗体实例,教你如何实现浮动窗体

    子窗体关闭父窗体

    在Windows Forms应用程序中，我们经常遇到子窗体与父窗体的交互问题，特别是涉及到如何从子窗体关闭父窗体的情况。这个场景在实际应用中很常见，例如在多窗口操作或模态对话框的使用时。下面将详细讲解如何实现"子...

    dev 子窗体停靠父窗体

    总结来说，通过Dev控件中的`XtraTabbedMdiManager`，我们可以轻松地实现MDI父窗体与子窗体的停靠功能，并创建类似Tab的用户体验。同时，通过设置控件属性和自定义方法，我们可以控制子窗体的打开次数和关闭方式，...

    C# 动态打开 关闭窗体标题栏 并实现拖动

    C# 动态打开 关闭窗体标题栏 并实现拖动 C#动态打开、关闭窗体的标题栏，并且关闭标题栏后，可拖动窗体移动，虽然这些都是小技巧，不过用好了会给你的程序增添一些生动，源码爱好者编译截图如上所示，希望入门者看一...

    WPF特炫窗体模板及打开关闭特效

    在本教程中，我们将探讨如何利用WPF实现独特的窗体模板以及引人注目的打开和关闭动画效果。 首先，让我们理解窗体模板（Window Templates）。在WPF中，窗体模板允许我们自定义窗口的外观和行为。这包括窗口边框、...

Magicbox
Global site tag (gtag.js) - Google Analytics