首页
所有分类
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 相关文章推荐
JavaScript静态的动态
Sep 18 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
jquery密码强度校验
Dec 02 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 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
Jmerte(1) 自定义组件(1) Vue(10) Storage(1) click(1) KVM(1) HashSet集合(1) Yolov5(1) 本地化存储(1) TimePickerView(1)
You might like
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
PHP中for循环语句的几种变型
2006/11/26 PHP
php 全局变量范围分析
2009/08/07 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
javascript demo 基本技巧
2009/12/18 Javascript
JavaScript 学习笔记（五）
2009/12/31 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
2019年Java面试必问之经典试题
2012/09/12 面试题
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
自荐信模板大全
2015/03/27 职场文书
暂停营业通知
2015/04/25 职场文书
七一表彰大会简报
2015/07/20 职场文书
青年联谊会致辞
2015/07/31 职场文书
2016年教师新年寄语
2015/08/18 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
HAM-2000摩机图
2021/04/22 无线电