JavaScript
搜索
分类

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

作者：yqjun 时间：2024-04-19 10:16:56　

本文实例讲述了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,模仿,窗口
0
投稿

猜你喜欢

  • Vue $emit()不能触发父组件方法的原因及解决

    2024-05-28 16:10:26

  • 关于人物角色设计讨论

    2008-10-16 13:47:00

  • JavaScript中尽量用局部变量的原因[译]

    2009-02-20 13:45:00

  • python 测试实现方法

    2023-03-24 11:34:04

  • Python开发中爬虫使用代理proxy抓取网页的方法示例

    2023-02-04 08:56:06

  • Pandas中GroupBy具体用法详解

    2023-08-10 04:16:42

  • 浅谈discuz密码加密的方式

    2024-05-02 17:07:51

  • 详解python中的线程

    2021-11-19 18:30:35

  • MySQL备份与恢复之热备（3）

    2024-01-21 04:50:04

  • Python match语句的具体使用

    2023-07-24 03:10:08

  • sql如何实现复合查询？

    2010-05-19 21:25:00

  • appium测试之APP元素定位及基本工具介绍

    2021-09-24 20:51:47

  • MySQL在线开启或禁用GTID模式

    2024-01-24 01:13:52

  • 在pandas中一次性删除dataframe的多个列方法

    2022-08-16 02:50:02

  • 使用MySQL数据库的23个注意事项

    2010-03-18 15:46:00

  • javascript实现小型区块链功能

    2024-04-18 09:29:10

  • 使用字符串建立查询能加快服务器的解析速度吗？

    2010-07-14 21:03:00

  • PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)

    2023-10-14 02:31:42

  • 资料：MsSQL常用SQL语句

    2009-02-23 12:54:00

  • Pandas DataFrame操作数据增删查改

    2022-07-10 09:37:39
    • asp之家 网络编程 m.aspxhome.com