首页
所有分类
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 相关文章推荐
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
vue写一个组件
Apr 09 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
javascript实现切割轮播效果
Nov 28 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 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
数据重复(1) capture(1) Navigator(1) tabBar(1) Flutter(2) element-china-area-data(1) Apache(17) Hudi(1) uniapp(4) self(1)
You might like
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
Nodejs进阶：如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
js通过classname来获取元素的方法
2016/11/24 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
python连接池实现示例程序
2013/11/26 Python
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
python3使用urllib模块制作网络爬虫
2016/04/08 Python
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
Cotton On美国网站：澳洲时装连锁品牌
2016/10/25 全球购物
美术指导助理求职信
2014/04/20 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
关于观后感的作文
2015/06/18 职场文书
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS