首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例

Posted in Javascript onMarch 04, 2015

本文实例讲述了JS实现可缩放、拖动、关闭和最小化的浮动窗口方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JS实现可缩放、拖动、关闭和最小化的浮动窗口</title>

</head>

<style type="text/css">

 .divWindow{word-wrap:break-word;position:absolute; overflow:hidden;}

 .divBar{border:#000000 1px solid;position:absolute;border-bottom:#000000 1px solid;width:100%;height:20px;background-color:#0099FF;cursor:hand;line-height:20px;}

 .divChange{position:absolute;right:25px;font-size:10pt;}

 .divClose{position:absolute;right:5px;font-size:11pt;}

 .divTitle{position:absolute;left:5px;font-size:10pt;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow: hidden;}

 .divContent{border:#000000 1px solid;border-top:#000000 0px solid;position:absolute; top:20px;width:100%; background-color:#FFFFFF; overflow-y:auto;

    SCROLLBAR-BASE-COLOR: #FFFFFF;SCROLLBAR-ARROW-COLOR: #999999;SCROLLBAR-FACE-COLOR: #EEEEEE;SCROLLBAR-HIGHLIGHT-COLOR: #EEEEEE;

    SCROLLBAR-SHADOW-COLOR: #EEEEEE;SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;SCROLLBAR-TRACK-COLOR: #FFFFFF;SCROLLBAR-DARKSHADOW-COLOR: #CCCCCC;}

 .divReSize{height:7px; width:7px; overflow:hidden; background-color:#0000FF; position:absolute; bottom:6px; right:6px; cursor:nw-resize}

 .divIframe{height:100%;width:100%;}

</style>

<script language="javascript">

var zindex=0  //全局变量

function dragClass(name,title,content,left,top,width,height){

var isMouseDown=false;

var maximum=false;

var offX=0;   //设置抓取点X坐标

var offY=0;   //设置抓取点Y坐标

var oldLeft;  //保存正常状态的X坐标

var oldTop;   //保存正常状态的Y坐标

this.mousedown= function (){    //按下拖动点

     Bar.setCapture(); //设置抓取

     offX=parseInt(event.clientX)-parseInt(Window.style.left);

     offY=parseInt(event.clientY)-parseInt(Window.style.top);

     isMouseDown=true;

 if(Window.style.zIndex<=zindex){

  zindex++;

  Window.style.zIndex=zindex;

 }

}

this.mousemove= function (){    //拖动窗口

     if (isMouseDown && !maximum){

  Bar.style.cursor='move'

  Window.style.left=event.clientX-offX;

  Window.style.top=event.clientY-offY;

  if(Window.style.zIndex<=zindex){

   zindex++;

   Window.style.zIndex=zindex;

  }

     }

}

this.mouseup=function (){     //松开按钮

     Bar.releaseCapture();     //取消抓取

     Bar.style.cursor='hand';

     if (parseInt(Window.style.top)<0){

     Window.style.top='0px';

     }

     if (parseInt(Window.style.left)<0){

     Window.style.left='0px';

     }

     isMouseDown=false;

}

this.dblclick=function (){    //双击最大最小化

     if (!maximum){

    oldLeft=Window.style.left;   //保存正常状态的X坐标

    oldTop=Window.style.top;    //保存正常状态的Y坐标

    Window.style.left='0px';

    Window.style.top='0px';

    Window.style.width= document.body.clientWidth;    //网页可见区域宽

    Title.style.width=(document.body.clientWidth-40)+'px';  //设置标题长度

    ReSize.style.display='none';

    if(Change.innerText=='－'){

      Window.style.height='100%';

      Content.style.height=document.body.clientHeight-20; //网页可见区域宽-标题高度

    }else{

      Window.style.height='20px';

    }

    maximum=true;

     }else{

    Window.style.left=oldLeft;

    Window.style.top=oldTop;

    Window.style.width=width+'px';

    Title.style.width=(width-40)+'px';

    ReSize.style.display='';

    if(Change.innerText=='－'){

      Window.style.height=height+'px';

      Content.style.height=parseInt(height-20)+'px';

    }else{

      Window.style.height='20px';

    }

    maximum=false;

     }

 if(Window.style.zIndex<=zindex){

  zindex++;

  Window.style.zIndex=zindex;

 }

}

this.changeWindow=function (){   //收缩窗口

     event.cancelBubble=true;

  if(Change.innerText=='－'){

    Window.style.height='20px';

    Change.innerText='□';

    Content.style.display='none';

    ReSize.style.display='none';

     }else{

    if (maximum){

      Window.style.height='100%';

      Content.style.display='';

      ReSize.style.display='';

      Content.style.height=document.body.clientHeight-20; //网页可见区域宽-标题高度

    }else{

      Window.style.height=height+'px';

      Content.style.display='';

      ReSize.style.display='';

      Content.style.height=parseInt(height-20)+'px';

    }

    Change.innerText='－';

     }

}
var Window=document.createElement("div");

 Window.id="divWindow"+ name;

 Window.className="divWindow";

 Window.style.left=left+'px';

 Window.style.top=top+'px';

 Window.style.width=width+'px';

 Window.style.height=height+'px';

 Window.onclick=function(){

  if(parseInt(Window.style.zIndex)<=zindex){

   zindex++;

   Window.style.zIndex=zindex;

  }

 }

this.Window=Window;

//公有属性，类外可操作；若要在类外操作，可将元素改为公有属性

 

var Bar=document.createElement("div");

 Bar.id="divBar"+name;

 Bar.onselectstart="return false";

 Bar.className="divBar";

 Bar.onmousedown=this.mousedown;

 Bar.ondblclick=this.dblclick;

 Bar.onmousemove=this.mousemove;

 Bar.onmouseup=this.mouseup;

 Window.appendChild(Bar);

var Title=document.createElement("span");

 Title.id="divTitle"+ name;

 Title.className="divTitle";

 Title.style.width=(width-40)+'px';    //自适应标题长度

 Title.innerText=title;

 Bar.appendChild(Title);

var Change=document.createElement("span");

 Change.id="divChange"+ name;

 Change.className="divChange";

 Change.innerText="－";

 Change.ondblclick=this.changeWindow;

 Change.onclick=this.changeWindow;

 Bar.appendChild(Change);

var Close=document.createElement("span");

 Close.id="divClose"+ name;

 Close.onclick=function(){

  Window.style.display='none';

 }

 Close.className="divClose";

 Close.innerText="×";

 Bar.appendChild(Close);

var Content=document.createElement("div");

 Content.id="divContent"+ name;

 Content.className="divContent"

 Content.innerHTML=content;

 Content.style.height=parseInt(height-20)+'px';

 Window.appendChild(Content);

 

var ReSize=document.createElement("div");

 ReSize.className="divReSize";

 ReSize.onmousedown=function(){

  if(Window.style.zIndex<=zindex){

   zindex++;

   Window.style.zIndex=zindex;

  }

  ReSize.setCapture();

  isMouseDown=true;

 }

 ReSize.onmousemove=function(){

   if (isMouseDown && !maximum)

   {

   width=parseInt(event.clientX)-parseInt(Window.style.left)+5;

   height=parseInt(event.clientY)-parseInt(Window.style.top)+5;

   if(width>100){       //设置最小宽度

    Window.style.width=width+'px';

    Title.style.width=(width-40)+'px';

   }

   if(height>100){       //设置最小高度

    Window.style.height=height+'px';

    Content.style.height=parseInt(height-20)+'px';

   }

   }

 }

 ReSize.onmouseup=function(){

  ReSize.releaseCapture();

  isMouseDown=false;

 }

 Window.appendChild(ReSize);

var Iframe=document.createElement("iframe"); //添加iframe，IE6.0下遮挡<select>控件

 Iframe.className="divIframe";

 Window.appendChild(Iframe);

 

 document.body.appendChild(Window);
}

</script>

<body>

<script>

//dragClass(ID,窗口标题,内容,X坐标,Y坐标,宽,长)

var c1="窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1";

objWin1=new dragClass('win1','拖动窗口1',c1,0,150,300,300);

var c2="窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2";

objWin2=new dragClass('win2','拖动窗口2',c2,350,150,300,300);

var objWin3;

function openWin(){

 if(objWin3==null){

  var c3="123窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3";

  objWin3=new dragClass('win3',c3,c3,700,150,300,300);

 }else{

    if(objWin3.Window.style.display=='none'){

   objWin3.Window.style.display='';

    }

 }

}

</script>

<input type="button" value="弹出【窗口3】" onClick="openWin()" />

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
jQuery选择器源码解读（二）：select方法
Mar 31 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
Vue 自定义指令功能完整实例
Sep 17 Javascript
原生小程序封装跑马灯效果
Oct 21 Javascript
JavaScript常用脚本汇总（一）
Mar 04 #Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 #Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 #Javascript
JavaScript中的关联数组问题
Mar 04 #Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 #Javascript
深入理解JavaScript系列（17）：面向对象编程之概论详细介绍
Mar 04 #Javascript
JavaScript设置获取和设置属性的方法
Mar 04 #Javascript
摩托罗拉(1) 军机(1) BOSE(2) 晶体管(2) 收信机(3) 沃尔沃(1) 66-XI(1) 77A(2) MOTOROLA(1) VOLVO(1)
You might like
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
表单JS弹出填写提示效果代码
2011/04/16 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
anime.js 实现带有描边动画效果的复选框（推荐）
2017/12/24 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
Python判断操作系统类型代码分享
2014/11/22 Python
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
Python八皇后问题解答过程详解
2019/07/29 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
Desigual英国官网：在线购买原创服装
2018/03/09 全球购物
20年同学聚会感言
2014/02/03 职场文书
党员创先争优承诺书
2014/03/26 职场文书
广播体操比赛口号
2014/06/10 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
行政上诉状范文
2015/05/23 职场文书
2019年度开业庆典祝福语大全！
2019/07/05 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
Python Django ORM连表正反操作技巧
2021/06/13 Python
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
Java详细解析==和equals的区别
2022/04/07 Java/Android