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

JavaScript实现模仿桌面窗口的方法

Posted in Javascript onJuly 18, 2015

本文实例讲述了JavaScript实现模仿桌面窗口的方法。分享给大家供大家参考。具体如下：

这里使用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>
<title>JS山寨桌面窗口</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" media="screen">
html, body, div {
 margin: 0;
 padding: 0;
} 
html, body {
 background: #FFFFFF;
 width: 100%;
 height: 100%;
 overflow: hidden;
}
#box {
 position: absolute;
 top: 30%;
 left: 40%;
 width: 250px;
 height: 150px;
 background: #EEE;
 border: 1px solid #666;
 border-radius: 8px;
 box-shadow: 2px 2px 5px #777;
}
/*标题栏*/
#boxHeader {
 width: 100%;
 height: 30px;
 background: none!important;
 background: #EEE;
 border-bottom: 2px solid #AAA;
 border-radius: 5px 5px 0 0;
}
#button {
 float: right;
 width: 79px;
 height: 15px;
 margin: 5px 5px 0 0!important;
 margin: 5px 2px 0 0;
 background: #CCC;
 border-radius: 5px;
}
#button div {
 float: left;
 width: 25px;
 height: 15px;
 border-right: 2px #AAA solid;
}
#button .close {
 border: none;
 border-radius: 0px 5px 5px 0;
}
#button .minimize {
 border-radius: 5px 0 0 5px;
}
/*八个方向*/
/*用于显示变栏颜色，作为测试
#boxN, #boxE, #boxS, #boxW {
 background: red;
}
#boxNE, #boxES, #boxSW, #boxWN {
 background: green;
}
*/
#boxN{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 5px;
 overflow: hidden;
}
#boxE{
 position: absolute;
 top: 0;
 right: 0;
 width: 5px;
 height: 100%;
 overflow: hidden;
}
#boxS{
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 5px;
 overflow: hidden;
}
#boxW{
 position: absolute;
 top: 0;
 left: 0;
 width: 5px;
 height: 100%;
 overflow: hidden;
}
#boxNE {
 position: absolute;
 right: 0;
 top: 0;
 width: 5px;
 height: 5px;
 overflow: hidden;
}
#boxES {
 position: absolute;
 right: 0;
 bottom: 0;
 width: 5px;
 height: 5px;
 overflow: hidden;
}
#boxSW {
 position: absolute;
 left: 0;
 bottom: 0;
 width: 5px;
 height: 5px;
 overflow: hidden;
}
#boxWN {
 position: absolute;
 left: 0;
 top: 0;
 width: 5px;
 height: 5px;
 overflow: hidden;
}
/*显示按钮*/
#showButton {
 display: none;
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -75px 0 0 -75px; 
 width: 150px;
 height: 150px;
}
#showButton span {
 font: 50px bolder;
}
/*改变大小时的预览DIV*/
#virtualBox {
 position: absolute;
 background: #8EC6FF;
 border: 1px solid #147AFF;
 border-radius: 8px;
 opacity: 0.4;
 filter: alpha(opacity = 40);
}
</style>
<script type="text/javascript">
//拖扯box函数
var dragDiv = function() {
 var box = document.getElementById("box");
 var boxHeader = document.getElementById("boxHeader");
 var bDraging = false;
 var disX = disY = 0;
 //记录鼠标按下时距离box左、上边框距离
 boxHeader.onmousedown = function(event) {
  bDraging = true;
  document.body.style.cursor = "move";
  var event = event || window.event;
  disX = event.clientX - box.offsetLeft;
  disY = event.clientY - box.offsetTop;
  //拖动box
  document.onmousemove = function(event) {
   if(!bDraging) return false;
   document.body.style.cursor = "move";
   var event = event || window.event;
   var boxX = event.clientX - disX;
   var boxY = event.clientY - disY;
   var maxX = document.body.scrollWidth - box.offsetWidth;
   var maxY = document.body.offsetHeight - box.offsetHeight;
   boxX = (boxX < 0) ? 0 : boxX;
   boxY = (boxY < 0) ? 0 : boxY;
   boxX = (boxX > maxX) ? maxX : boxX;
   boxY = (boxY > maxY) ? maxY : boxY;
   box.style.left = boxX + "px";
   box.style.top = boxY + "px";
  };
  document.onmouseup = function() {
   bDraging = false;
   document.body.style.cursor = "";
  };
  return false;
 };
};
var changeSize = function() {
 var box = document.getElementById("box");
 var virtualBox = document.getElementById("virtualBox");
 var boxSide = document.getElementById("boxSide").getElementsByTagName("div");
 var bSizeChanging = bMousedowning = false;
 //box是否正在改变 & 鼠标是否正在按下
 var originalWidth = box.offsetWidth;
 //box最原始宽度
 var originalHeight = box.offsetHeight;
 //box最原始高度
 for(var i = 0; i < boxSide.length; i++) {
 //遍历boxside，监听鼠标
  boxSide[i].index = i;
  boxSide[i].onmouseover = function() {
   if(bMousedowning) return false;
   changeCursor(true, this.index);
  };
  boxSide[i].onmouseout = function() {
   if(bMousedowning) return false;
   changeCursor(false, this.index);
  };
  boxSide[i].onmousedown = function(event) {
   var event = event || window.event;   
   var index = this.index;
   var aBoxPrevious = new Array();
   //记录box上一次的状态
   aBoxPrevious["clientX"] = event.clientX;
   aBoxPrevious["clientY"] = event.clientY;
   aBoxPrevious["left"] = box.offsetLeft;
   aBoxPrevious["top"]= box.offsetTop;
   aBoxPrevious["width"] = box.offsetWidth;
   aBoxPrevious["height"] = box.offsetHeight;
   bMousedowning = true;
   bSizeChanging = true;
   showVirtualBox(virtualBox, aBoxPrevious);
   document.onmousemove = function(event) {
    if(!bSizeChanging) return false;
    changeVirtualBoxSize(event, aBoxPrevious, index);
   };
   document.onmouseup = function() {
    changeBoxSize(virtualBox)
    hideVirtualBox(virtualBox);
    bSizeChanging = false;
    bMousedowning = false;
    changeCursor(false, index);
   };
   return false;
  };
 }
 //改变鼠标指针样式
 var changeCursor = function(bIsShowing, index) {
  if(bIsShowing) {
   var cursorStyle = ["n-resize","e-resize","s-resize","w-resize","ne-resize","se-resize","sw-resize","nw-resize"];
   document.body.style.cursor = cursorStyle[index];
  }
  else {
   document.body.style.cursor = "";
  }
 };
 //显示预览DIV
 var showVirtualBox = function(virtualBox, aBoxPrevious) {
  with(virtualBox.style) {
   display = "block";
   top = aBoxPrevious["top"] + "px";
   left = aBoxPrevious["left"] + "px";
   width = aBoxPrevious["width"] + "px";
   height = aBoxPrevious["height"] + "px";
  }
 }
 //隐藏预览DIV
 var hideVirtualBox = function(virtualBox) {
  virtualBox.style.display = "none";
 }
 //改变box大小
 var changeVirtualBoxSize = function(event, aBoxPrevious, index) {
  var event = event || window.event;
  var bTop = bRight = bBottom = bLeft = false;
  //八个方向，分别为N、E、S、W、NE、SW、SW、NW
  switch (index) {
   case 0:
    bTop = true;
    break;
   case 1:
    bRight = true;
    break;
   case 2:
    bBottom = true;
    break;
   case 3:
    bLeft = true;
    break;
   case 4:
    bTop = bRight = true;;
    break;
   case 5:
    bRight = bBottom = true;
    break;
   case 6:
    bBottom = bLeft = true;
    break;
   case 7:
    bLeft = bTop = true;
    break;
   default:
    break;
  }
  //向北改变高度
  if(bTop) {
   var newTopHeight = aBoxPrevious["height"] - (event.clientY - aBoxPrevious["clientY"]);
   (newTopHeight < originalHeight) && (newTopHeight = originalHeight);
   (newTopHeight > aBoxPrevious["top"] + aBoxPrevious["height"]) && (newTopHeight = aBoxPrevious["top"] + aBoxPrevious["height"]);
   var newTop = aBoxPrevious["top"] + (event.clientY - aBoxPrevious["clientY"]);
   (newTop > aBoxPrevious["top"] + aBoxPrevious["height"] - originalHeight) && (newTop = aBoxPrevious["top"] + aBoxPrevious["height"] - originalHeight);
   (newTop < 0) && (newTop = 0);
   virtualBox.style.top = newTop + "px";
   virtualBox.style.height = newTopHeight - box.clientTop * 2 + "px"; 
   //不能忽略border-width
   bTop = false;
  }
  //向东改变宽度
  if(bRight) {
   var newRightWidth = aBoxPrevious["width"] + (event.clientX - aBoxPrevious["clientX"]);
   (newRightWidth < originalWidth) && (newRightWidth = originalWidth);
   (newRightWidth > document.body.scrollWidth - aBoxPrevious["left"]) && (newRightWidth = document.body.scrollWidth - aBoxPrevious["left"]);
   virtualBox.style.width = newRightWidth - box.clientTop * 2 + "px";
   bRight = false;
  }
  //向南改变高度
  if(bBottom) {
   var newBottomHeight = aBoxPrevious["height"] + (event.clientY - aBoxPrevious["clientY"]);
   (newBottomHeight < originalHeight) && (newBottomHeight = originalHeight);
   (newBottomHeight > document.body.scrollHeight - aBoxPrevious["top"]) && (newBottomHeight = document.body.scrollHeight - aBoxPrevious["top"]);
   virtualBox.style.height = newBottomHeight - box.clientTop * 2 + "px";
   bBottom = false;
  }
  //向西改变宽度
  if(bLeft) {
   var newLeftWidth = aBoxPrevious["width"] - (event.clientX - aBoxPrevious["clientX"]);
   (newLeftWidth < originalWidth) && (newLeftWidth = originalWidth);
   (newLeftWidth > aBoxPrevious["left"] + aBoxPrevious["width"]) && (newLeftWidth = aBoxPrevious["left"] + aBoxPrevious["width"]);
   var newLeft = aBoxPrevious["left"] + (event.clientX - aBoxPrevious["clientX"]);
   (newLeft > aBoxPrevious["left"] + aBoxPrevious["width"] - originalWidth) && (newLeft = aBoxPrevious["left"] + aBoxPrevious["width"] - originalWidth);
   (newLeft < 0) && (newLeft = 0);
   virtualBox.style.left = newLeft + "px";
   virtualBox.style.width = newLeftWidth - box.clientLeft * 2 + "px";
   bLeft = false;
  }
 };
 var changeBoxSize = function(virtualBox) {
  with(box.style) {
   left = virtualBox.style.left;
   top = virtualBox.style.top;
   width = virtualBox.style.width;
   height = virtualBox.style.height;
  }
 }
};
//窗口按钮函数
boxButton = function() {
 var box = document.getElementById("box");
 var boxHeader = document.getElementById("boxHeader");
 var aButton = document.getElementById("button").getElementsByTagName("div");
 var showButton = document.getElementById("showButton");
 var span = showButton.getElementsByTagName("span")[0];
 var bIsMin = bIsMax = false;
 //目前状态是否最小 or 最大
 boxHeader.ondblclick = function() {
  maximize();
 }
 for(var i = 0; i < aButton.length; i++) {
  aButton[i].index = i;
  aButton[i].onmouseover = function() {
   aButton[this.index].style.background = "#AAA";
   document.body.style.cursor = "pointer";
  };
  aButton[i].onmouseout = function() {
   aButton[this.index].style.background = "";
   document.body.style.cursor = ""
  };
  aButton[i].onclick = function() {
   switch(this.index) {
    case 0:
     minimize();
     break;
    case 1:
     maximize();
     break;
    case 2:
     close();
     break;
    default:
     break;
   }
  };
 }
 var minimize = function() {
  if(bIsMin) {
   resumeBox();
   bIsMin = false;
  }
  else {
   box.style.width = "89px";
   box.style.height = "32px";
   box.style.left = "2%";
   box.style.top = document.body.offsetHeight - box.offsetHeight - 15 + "px";
   bIsMin = true;
   bIsMax = false;
  }
 };
 var maximize = function() {
  if(bIsMax) {
   resumeBox();
   bIsMax = false;
  }
  else {
   box.style.width = document.body.scrollWidth - 10 + "px";
   box.style.height = document.body.scrollHeight - 10 + "px";
   box.style.left = "5px";
   box.style.top = "5px";
   bIsMax = true;
   bIsMin = false;
  }
 };
 var close = function() {
  box.style.display = "none";
  showButton.style.display = "block";
 };
 var resumeBox = function() {
  box.style.top = "30%";
  box.style.left = "40%";
  box.style.width = "250px";
  box.style.height = "150px";
 };
 showButton.onmousedown = function() {
  span.innerHTML = "^o^";
 };
 showButton.onclick = function() {
  this.style.display = "none";
  span.innerHTML = ">_<";
  resumeBox();
  box.style.display = "block";
 };
};
window.onload = function() {
 changeSize();
 dragDiv();
 boxButton();
};
</script>
</head>
<body>
<div id="box">
 <div id="boxHeader">
  <div id="button">
   <div class="minimize"></div>
   <div class="maximize"></div>
   <div class="close"></div>
  </div>
 </div>
 <div id="boxSide">
  <div id="boxN"></div>
  <div id="boxE"></div>
  <div id="boxS"></div>
  <div id="boxW"></div>
  <div id="boxNE"></div>
  <div id="boxES"></div>
  <div id="boxSW"></div>
  <div id="boxWN"></div>
 </div>
</div>
<button id="showButton"><span>>_<</span><p>居然关掉人家，讨厌~</p><p>快打开</p></button>
<div id="virtualBox"></div>
</body>
</html>

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

JavaScript实现模仿桌面窗口的方法

- Author -

yqjun

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

Javascript 相关文章推荐
JavaScript 开发规范要求(图文并茂)
Jun 11 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
js计算时间差代码【包括计算，天，时，分，秒】
Apr 26 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 #Javascript
javascript顺序加载图片的方法
Jul 18 #Javascript
javascript字符串循环匹配实例分析
Jul 17 #Javascript
动态加载jQuery的两种方法实例分析
Jul 17 #Javascript
javascript父子页面通讯实例详解
Jul 17 #Javascript
javascript实现的闭包简单实例
Jul 17 #Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 #Javascript
Pytesseract(1) flex(1) GNN(1) 文字识别(1) 验证码(1) 追加文本(1) 匹配文本(1) flex-shrink(1) 柱状图(1) SFTP(3)
You might like
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
$()JS小技巧
2007/07/21 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
数据分析软件之FineReport教程：[5]参数界面JS（全）
2015/08/13 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
详解Python 爬取13个旅游城市，告诉你五一大家最爱去哪玩？
2019/05/07 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
详解Python文件修改的两种方式
2019/08/22 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
python开根号实例讲解
2020/08/30 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
Bjorn Borg官方网上商店：国际运动时尚品牌
2016/08/27 全球购物
西班牙床垫网上商店：Colchones.es
2018/05/06 全球购物
新西兰最大的天然保健及护肤品网站：HealthPost（直邮中国）
2021/02/13 全球购物
设计模式的基本要素是什么
2014/04/21 面试题
90后毕业生的求职信范文
2013/09/21 职场文书
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
少儿节目主持串词
2014/04/02 职场文书
销售开票员岗位职责
2015/04/15 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
React四级菜单的实现
2022/04/08 Javascript