首页
所有分类
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 面向对象编程  function是方法(函数)
Sep 17 Javascript
js常用排序实现代码
Dec 28 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 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) 乌克兰购物网站(27) 保加利亚购物网站(3) 冰岛购物网站(1) 哈萨克斯坦购物网站(2) 罗马尼亚购物网站(10) PHP面试题(54) 约旦购物网站(1) 希腊购物网站(6) 白俄罗斯购物网站(3)
You might like
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
php简单获取复选框值的方法
2016/05/11 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
封装好的省市地区联动控件附下载
2007/08/13 Javascript
jquery 双色表格实现代码
2009/12/08 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
javascript实现视频弹幕效果（两个版本）
2019/11/28 Javascript
python基础教程之获取本机ip数据包示例
2014/02/10 Python
Python Tkinter简单布局实例教程
2014/09/03 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
python实现处理mysql结果输出方式
2020/04/09 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
美国家居装饰店：Pier 1
2019/09/04 全球购物
行政专员求职信范文
2014/05/03 职场文书
长江三峡导游词
2015/01/31 职场文书
培根随笔读书笔记
2015/07/01 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL