首页
所有分类
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 getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
vue prop属性传值与传引用示例
Nov 13 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) 小缇娜的奇幻之地(1) 暴雪(1) Docker(14) 巫师(1) explain(2) 帝国时代(1) 守望先锋(1) 艾尔登法环(1)
You might like
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
window.onresize 多次触发的解决方法
2013/11/08 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
利用jQuery.Validate异步验证用户名是否存在（推荐）
2016/12/09 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
Node.js五大应用性能技巧小结（必须收藏）
2017/08/09 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
Python可跨平台实现获取按键的方法
2015/03/05 Python
Python读写ini文件的方法
2015/05/28 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
Python实现把类当做字典来访问
2019/12/16 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
Timberland美国官网：全球领先的户外品牌
2016/08/15 全球购物
汉森批发：Hansen Wholesale
2018/05/24 全球购物
Nice Kicks网上商店：ShopNiceKicks.com
2018/12/25 全球购物
大学生励志演讲稿
2014/04/25 职场文书
读书月活动方案
2014/05/22 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
MySQL通过binlog恢复数据
2021/05/27 MySQL
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python
图神经网络GNN算法
2022/05/11 Python