本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
