编程 Javascript

html+css+js实现xp window界面及有关功能

Posted in Javascript onMarch 26, 2013

注意：该程序在IE调试的，其他浏览器可能有BUG，见谅！

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=GB2312"> 
<title>Insert title here</title> 
<!-- 
-- CSS 
-- set window style 
--> 
<link rel="stylesheet" type="text/css" href="main.css" /> <!-- 
-- JavaScript 
-- set function 
--> 
<script language="JavaScript" src="mywindow.js"> </script> 
<script> 
alert("XP Window以IE测试,其他浏览器可能有BUG请见谅! 基本功能+四边四角顶部拖拉都已实现!") 
alert("进行操作前,记得先初始化窗口哦!"); 
/* 
* create xp window and initialize 
*/ 
var myW = new MyWindow(); 
function initialize() { 
myW.setBackgroundDiv("mywindow"); 
myW.setLeftDiv("mywindow_left"); 
myW.setRightDiv("mywindow_right"); 
myW.setBottomDiv("mywindow_bottom"); 
myW.setTopDiv("mywindow_top"); 
myW.initialEvent(); 
} 
/* 
* list button event function 
*/ 
function hiddenWindow() { 
myW.hidden(); 
} 
function showWindow() { 
myW.show(); 
} 
function setAdjust(adj) { 
myW.setAdjust(adj); 
} 
function showMaxSize() { 
myW.showMaxSize(); 
} 
function getTop() { 
myW.getTop(); 
} 
function getLeft() { 
myW.getLeft(); 
} 
function getWidth() { 
myW.getWidth(); 
} 
function getHeight() { 
myW.getHeight(); 
} 
function removeWindow() { 
myW.removeWindow(); 
} 
function addObject() { 
myW.addObject(); 
} 
function deleteObject() { 
myW.deleteObject(); 
} 
/* 
* drag operation event function 
*/ 
function start(idName) { 
myW.start(idName); 
} 
function move(idName) { 
myW.move(idName); 
} 
function end(idName) { 
myW.end(idName); 
} 
</script> 
</head> 
<body> 
<!-- 
-- set list button 
--> 
<ul> 
<li><a href="#" onclick="initialize();">初始化窗口</a></li> 
<li><a href="#" onclick="hiddenWindow();">隐藏窗口</a></li> 
<li><a href="#" onclick="showWindow();">显示窗口</a></li> 
<li><a href="#" onclick="setAdjust(true);">设置窗口可调整大小</a></li> 
<li><a href="#" onclick="setAdjust(false);">设置窗口不可调整大小</a></li> 
<li><a href="#" onclick="showMaxSize();">最大化窗口</a></li> 
<li><a href="#" onclick="addObject();">在窗口中添加对象 </a></li> 
<li><a href="#" onclick="deleteObject();">删除对象</a></li> 
<li><a href="#" onclick="getTop();">得到Top的值</a></li> 
<li><a href="#" onclick="getLeft();">得到Left的值</a></li> 
<li><a href="#" onclick="getWidth();">得到Width的值</a></li> 
<li><a href="#" onclick="getHeight();">得到Height的值</a></li> 
<li><a href="#" onclick="removeWindow();">释放窗口资源</a></li> 
</ul><br> 
<!-- 
-- set every div of window 
-- because cover proble, so order of set div is bottom, right/left, central, last top 
--> 
<div id="mywindow"> 
<!-- set bottom div --> 
<div id="mywindow_bottom"> 
<div id="mywindow_botton_right_corner" onmousedown="start('mywindow_botton_right_corner');" 
onmousemove="move('mywindow_botton_right_corner');" 
onmouseup="end('mywindow_botton_right_corner');"> 
</div> 
</div> 
<!-- set right div --> 
<div id="mywindow_right" onmousedown="start('mywindow_right');" onmousemove="move('mywindow_right');" 
onmouseup="end('mywindow_right');"> 
</div> 
<!-- set left div --> 
<div id="mywindow_left" onmousedown="start('mywindow_left');" onmousemove="move('mywindow_left');" 
onmouseup="end('mywindow_left')";> 
</div> 
<!-- set central div, it is added object --> 
<div id = "central"></div> 
<!-- set top div --> 
<div id="mywindow_top" onmousedown="start('mywindow_top');" onmousemove="move('mywindow_top');" 
onmouseup="end('mywindow_top');"> 
<div id="mywindow_top_left_corner"> 
</div> 
<div id="mywindow_top_middle"> 
<img class="button" id="top_close_button" src="image/window_control_close_blur.bmp" 
/> 
<img class="button" id="top_max_button" src="image/window_control_max_blur.bmp" 
/> 
<img class="button" id="top_min_button" src="image/window_control_min_blur.bmp" 
/> 
</div> 
<div id="mywindow_top_right_corner"> 
</div> 
</div> 
<!-- set corner of drag window --> 
<div id="mywindow_right_corner" onmousedown="start('mywindow_right_corner');" onmousemove="move('mywindow_right_corner');" 
onmouseup="end('mywindow_right_corner');"> 
</div> 
<div id="mywindow_left_corner" onmousedown="start('mywindow_left_corner');" onmousemove="move('mywindow_left_corner');" 
onmouseup="end('mywindow_left_corner');"> 
</div> 
<div id="mywindow_rBottom_corner" onmousedown="start('mywindow_rBottom_corner');" onmousemove="move('mywindow_rBottom_corner');" 
onmouseup="end('mywindow_rBottom_corner');"> 
</div> 
<!-- set border of drag window --> 
<div id="mywindow_top_drag" onmousedown="start('mywindow_top_drag');" onmousemove="move('mywindow_top_drag');" 
onmouseup="end('mywindow_top_drag');"></div> 
<div id="mywindow_bottom_drag" onmousedown="start('mywindow_bottom_drag');" onmousemove="move('mywindow_bottom_drag');" 
onmouseup="end('mywindow_bottom_drag');"></div> 
</div> 
</body> 
</html>

/** 
* set select button, use list as button 
*/ 
/* set list button */ 
li { 
display: inline; 
white-space: nowrap; 
float: left; 
border: 0 solid white; 
border-right-width: 2px; 
border-bottom-width: 10px; 
} 
/* set <a> */ 
a { 
background-color: purple; 
color: white; 
text-decoration: none; 
padding: 4px 6px; 
} /* set <a>: hover */ 
a:hover { 
background-color: #FF5500; 
} 
/* 
* set every div position 
*/ 
div { 
position: absolute; 
} 
/** 
* set window 
*/ 
#mywindow { 
background-image: url("image/window_bgImage.png"); 
/* assign appear position */ 
top: 100px; 
left: 200px; 
/* assign initialization size of window */ 
width: 500px; 
height: 400px; 
} 
/** 
* set bottom div of window 
*/ 
#mywindow_bottom { 
background-image: url("image/window_bottom_middle_border.bmp"); 
background-repeat: repeat-x; 
top: 374px; 
left: 0px; 
width: 100%; 
height: 26px; 
} 
/* set drag div of bottom */ 
#mywindow_botton_right_corner { 
background-image: url("image/window_control_drag.bmp"); 
background-repeat: no-repeat; 
top: 8px; 
left: 486px; 
width: 12px; 
height: 12px; 
cursor: nw-resize; 
} 
/** 
* set right div of window 
*/ 
#mywindow_left { 
background-image: url("image/window_left_border.bmp"); 
background-repeat: repeat-y; 
top: 0px; 
left: 0px; 
width: 4px; 
height: 100%; 
cursor: e-resize; 
} 
/** 
* set central div 
*/ 
#central { 
top: 10%; 
left: 10%; 
width: 80%; 
height: 80%; 
} 
/** 
* set left div of window 
*/ 
#mywindow_right { 
background-image: url("image/window_right_border.bmp"); 
background-repeat: repeat-y; 
top: 0px; 
left: 100%; 
width: 4px; 
height: 100%; 
cursor: e-resize; 
} 
/** 
* set top div of window 
*/ 
#mywindow_top { 
background-image: url("image/window_top_header.bmp"); 
background-repeat: repeat-x; 
top: 0px; 
left: 0px; 
width: 100%; 
height: 30px; 
} 
/* set left corner div of top */ 
#mywindow_top_left_corner { 
top: 0px; 
left: 0px; 
background-image: url("image/window_top_left_corner.gif"); 
background-repeat: no-repeat; 
width: 8px; 
height: 100%; 
} 
/* set middle div of top, and set buttom image */ 
#mywindow_top_middle { 
top: 0px; 
left: 425px; 
} 
img.button { 
float: right; 
margin: 5px 1px; 
} 
/* set right corner div of top */ 
#mywindow_top_right_corner { 
top: 0px; 
left: 498px; 
background-image: url("image/window_top_right_corner.bmp"); 
background-repeat: no-repeat; 
width: 8px; 
height: 100%; 
} 
#mywindow_right_corner { 
top: 0%; 
left: 100%; 
width: 4px; 
height: 4px; 
cursor: ne-resize; 
} 
#mywindow_left_corner { 
top: 0%; 
left: 0%; 
width: 4px; 
height: 4px; 
cursor: nw-resize; 
} 
#mywindow_rBottom_corner { 
top: 99%; 
left: 0%; 
width: 4px; 
height: 4px; 
cursor: ne-resize; 
} 
#mywindow_top_drag { 
top: 0%; 
left: 2%; 
width: 96%; 
height: 4px; 
cursor: n-resize; 
} 
#mywindow_bottom_drag { 
top: 99%; 
left: 2%; 
width: 96%; 
height: 4px; 
cursor: n-resize; 
}

function MyWindow() { 
/* background left right bottom top div */ 
var bgDiv = null; 
var leftDiv = null; 
var rightDiv = null; 
var bottomDiv = null; 
var topDiv = null; /* old values of window */ 
var oldTop = 100; 
var oldLeft = 200; 
var oldWidth = 500; 
var oldHeight = 400; 
var clickTopDivX = null; 
var clickTopDivY = null; 
/* record whether max size */ 
var maxSize = false; 
/* record whether adjust */ 
var adjust = true; 
/* record click whether in window */ 
var clickInWindow = false; 
/* record add object */ 
var addObj = null; 
/* record whether mouse is down*/ 
var down = 0; 
/* 
* set five div of window 
*/ 
this.setBackgroundDiv = function(idName) { 
bgDiv = document.getElementById(idName); 
}; 
this.setLeftDiv = function(idName) { 
leftDiv = document.getElementById(idName); 
}; 
this.setRightDiv = function(idName) { 
rightDiv = document.getElementById(idName); 
}; 
this.setBottomDiv = function(idName) { 
bottomDiv = document.getElementById(idName); 
} 
this.setTopDiv = function(idName) { 
topDiv = document.getElementById(idName); 
} 
/* set whether window is resize */ 
this.setAdjust = function(Boolean) { 
adjust = Boolean; 
} 
/* initialize events of window div */ 
this.initialEvent = function() { 
document.onclick = judgeClick; 
var close = document.getElementById("top_close_button"); 
close.onmouseover = closeMouseOver; 
close.onmouseout = closeMouseOut; 
close.onmousedown = closeMouseDown; 
close.onclick = this.removeWindow; 

var max = document.getElementById("top_max_button"); 
max.onmouseover = maxMouseOver; 
max.onmouseout = maxMouseOut; 
max.onmousedown = maxMouseDown; 
max.onclick = showNormalOrMax; 
var min = document.getElementById("top_min_button"); 
min.onmouseover = minMouseOver; 
min.onmouseout = minMouseOut; 
min.onmousedown = minMouseDown; 
min.onclick = hiddenWindow; 
} 
/* hidden window */ 
this.hidden = function() { 
bgDiv.style.display="none"; 
}; 
/* show window */ 
this.show = function() { 
bgDiv.style.display=""; 
}; 
/* 
* add object to window, and delete it 
*/ 
this.addObject = function(){ 
if (addObj == null) { 
addObj = document.createElement("p"); 
addObj.innerHTML = "公鸡中的战斗机,OYE! 你太有才了!"; 
document.getElementById("central").appendChild(addObj); 
} 
} 
this.deleteObject = function() { 
addObj.parentNode.removeChild(addObj); 
addObj = null; 
} 
/* 
* chang window size function 
* curTop curLeft: new top left corner coordinate 
* curRight curBottom: new bottom right corner coordinate 
* curWidth curHeight: new width and height 
* Boolean: whether record new data 
*/ 
function changeWindowSize(curTop, curLeft, curWidth, curHeight, Boolean) { 
bgDiv.style.top = curTop; 
bgDiv.style.left = curLeft; 
bgDiv.style.width = curWidth; 
bgDiv.style.height = curHeight; 
/* record new data */ 
if (Boolean) { 
oldTop = curTop; 
oldLeft = curLeft; 
oldWidth = curWidth; 
oldHeight = curHeight; 
} 
bottomDiv.style.top = curHeight - 26; 
var bDivRCorner = document.getElementById("mywindow_botton_right_corner"); 
bDivRCorner.style.left = curWidth - 12; 
var tDivMiddleButtom = document.getElementById("mywindow_top_middle"); 
tDivMiddleButtom.style.left = curWidth - 72; 
var tDivRightCorner = document.getElementById("mywindow_top_right_corner"); 
tDivRightCorner.style.left = curWidth - 2; 
} 
/* change image of assign idName */ 
function changeImage(idName, imgSrc) { 
var image = document.getElementById(idName); 
image.src = imgSrc; 
} 
/* show max size of window */ 
this.showMaxSize = function() { 
if (adjust) { 
maxSize = true; 
changeImage("top_max_button", "image/window_control_resile_normall.bmp"); 
var maxWidth = screen.availWidth; 
var maxHeight = screen.availHeight; 
changeWindowSize(0, 0, maxWidth, maxHeight, false); 
} 
} 
/* remove window */ 
this.removeWindow = function() { 
if (bgDiv != null) 
bgDiv.parentNode.removeChild(bgDiv); 
} 
/* 
* get top, left, width, height values of window 
*/ 
this.getTop = function() { 
alert("My top pixel of window is: " + bgDiv.offsetTop); 
} 
this.getLeft = function() { 
alert("My Left pixel of window is: " + bgDiv.offsetLeft); 
} 
this.getWidth = function() { 
alert("My width pixel of window is: " + bgDiv.offsetWidth); 
} 
this.getHeight = function() { 
alert("My height pixel of window is: " + bgDiv.offsetHeight); 
} 
/* 
* get mouse location 
* return [x, y]: x and y coordinate of mouse 
*/ 
function getMouseXY() { 
var x = event.pageX || (event.clientX 
+ (document.documentElement.scrollLeft 
|| document.body.scrollLeft 
) 
); 
var y= event.pageY || (event.clientY 
+ (document.documentElement.scrollTop 
|| document.body.scrollTop 
) 
); 
return [x, y]; 
} 
/* 
* judge mouse click whether in window 
* in other words, judge window whether is lived 
*/ 
function judgeClick() { 
/* get mouse click site */ 
var coor = getMouseXY(); 
/* judge whether in window */ 
var myW = document.getElementById("mywindow"); 
var closeImage = document.getElementById("top_close_button"); 
var maxImage = document.getElementById("top_max_button"); 
var minImage = document.getElementById("top_min_button"); 
if (coor[0] >= myW.offsetLeft && coor[0] <= (myW.offsetLeft + myW.offsetWidth) 
&& coor[1] >= myW.offsetTop && coor[1] <= (myW.offsetHeight + myW.offsetTop)) { 
clickInWindow = true; 
closeImage.src = "image/window_control_close_normall.bmp"; 
if(maxSize == true) { 
maxImage.src = "image/window_control_resile_normall.bmp"; 
} else { 
maxImage.src = "image/window_control_max_normall.bmp"; 
} 
minImage.src = "image/window_control_min_normall.bmp"; 
} else { 
clickInWindow = false; 
closeImage.src = "image/window_control_close_blur.bmp"; 
if(maxSize == true) { 
maxImage.src = "image/window_control_resile_blur.bmp"; 
} else { 
maxImage.src = "image/window_control_max_blur.bmp"; 
} 
minImage.src = "image/window_control_min_blur.bmp"; 
} 
} 
/* 
* top button events function 
* there are mouse down, mouse move, mouse up and mouse move 
*/ 
function closeMouseDown() { 
changeImage("top_close_button", "image/window_control_close_mousedown.bmp"); 
} 
function closeMouseOver() { 
if(clickInWindow == true) { 
changeImage("top_close_button", "image/window_control_close_mouseon.bmp"); 
} else { 
changeImage("top_close_button", "image/window_control_close_blur.bmp"); 
} 
} 
function closeMouseOut() { 
if(clickInWindow == true) { 
changeImage("top_close_button", "image/window_control_close_normall.bmp"); 
} else { 
changeImage("top_close_button", "image/window_control_close_blur.bmp"); 
} 
} 
function maxMouseDown(){ 
if (maxSize == true) { 
changeImage("top_max_button", "image/window_control_resile_mousedown.bmp"); 
} 
else { 
changeImage("top_max_button", "image/window_control_max_mousedown.bmp"); 
} 
} 
function maxMouseOver() { 
if (clickInWindow == true) { 
if (maxSize == true) { 
changeImage("top_max_button", "image/window_control_resile_mouseon.bmp"); 
} 
else { 
changeImage("top_max_button", "image/window_control_max_mouseon.bmp"); 
} 
} 
else { 
if (maxSize == true) { 
changeImage("top_max_button", "image/window_control_resile_blur.bmp"); 
} 
else { 
changeImage("top_max_button", "image/window_control_max_blur.bmp"); 
} 
} 
} 
function maxMouseOut() { 
if(clickInWindow == true) { 
if (maxSize == true) { 
changeImage("top_max_button", "image/window_control_resile_normall.bmp"); 
} else { 
changeImage("top_max_button", "image/window_control_max_normall.bmp"); 
} 
} else { 
if (maxSize == true) { 
changeImage("top_max_button", "image/window_control_resile_blur.bmp"); 
} else { 
changeImage("top_max_button", "image/window_control_max_blur.bmp"); 
} 
} 
} 
/* max mouse click event function */ 
function showNormalOrMax(){ 
if (maxSize && adjust) { 
maxSize = false; 
changeWindowSize(oldTop, oldLeft, oldWidth, oldHeight, true); 
} else { 
showMaxSize(); 
} 
} 
function minMouseDown() { 
changeImage("top_min_button", "image/window_control_min_mousedown.bmp"); 
} 
function minMouseOver() { 
if(clickInWindow == true) { 
changeImage("top_min_button", "image/window_control_min_mouseon.bmp"); 
} else { 
changeImage("top_min_button", "image/window_control_min_blur.bmp"); 
} 
} 
function minMouseOut() { 
if(clickInWindow == true) { 
changeImage("top_min_button", "image/window_control_min_normall.bmp"); 
} else { 
changeImage("top_min_button", "image/window_control_min_blur.bmp"); 
} 
} 
/* 
* drag events function 
*/ 
this.start = function(idName) { 
if(idName == "mywindow_top") { 
var coor = getMouseXY(); 
clickTopDivX = coor[0]; 
clickTopDivY = coor[1]; 
} 
document.getElementById(idName).setCapture(); 
down = 1; 
} 
this.move = function(idName) { 
var curTop = oldTop; 
var curLeft = oldLeft; 
var curWidth = oldWidth; 
var curHeight = oldHeight; 
var coor = getMouseXY(); 
if (down && adjust && !maxSize) { 
if(idName == "mywindow_rBottom_corner") { 
curLeft = coor[0]; 
curWidth += oldLeft - curLeft; 
curHeight = coor[1] - oldTop; 
if(curWidth < 80) { 
curLeft = oldLeft + oldWidth - 80; 
} 
} else if(idName == "mywindow_left_corner") { 
curTop = coor[1]; 
curLeft = coor[0]; 
curWidth += oldLeft - curLeft; 
curHeight += oldTop - curTop; 
if(curHeight < 40) { 
curTop = oldTop + oldHeight - 40; 
} 
if(curWidth < 80) { 
curLeft = oldLeft + oldWidth - 80; 
} 
} else if(idName == "mywindow_right_corner") { 
curTop = coor[1]; 
curWidth = coor[0] - curLeft; 
curHeight = oldHeight + oldTop - curTop; 
if(curHeight < 40) { 
curTop = oldTop + oldHeight - 40; 
} 
} else if(idName == "mywindow_top") { 
curTop = curTop + coor[1] - clickTopDivY; 
curLeft = curLeft + coor[0] - clickTopDivX; 
clickTopDivX = coor[0]; 
clickTopDivY = coor[1]; 
} else if(idName == "mywindow_right") { 
curWidth = coor[0] - oldLeft; 
} else if(idName == "mywindow_left") { 
curLeft = coor[0]; 
curWidth += oldLeft - curLeft; 
if(curWidth < 80) { 
curLeft = oldLeft + oldWidth - 80; 
} 
} else if(idName == "mywindow_top_drag") { 
curTop = coor[1]; 
curHeight += oldTop - curTop; 
if(curHeight < 40) { 
curTop = oldTop + oldHeight - 40; 
} 
} else if(idName == "mywindow_bottom_drag"){ 
curHeight = coor[1] - oldTop; 
} else { 
// drag right corner of window 
curWidth = coor[0] - oldLeft; 
curHeight = coor[1] - oldTop; 
} 
if(curWidth < 80) { 
curWidth = 80; 
} 
if(curHeight < 40) { 
curHeight = 40; 
} 
changeWindowSize(curTop, curLeft, curWidth, curHeight, true); 
} 
} 
this.end = function(idName) { 
down = 0; 
document.getElementById(idName).releaseCapture(); 
} 
}

html+css+js实现xp window界面及有关功能

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

Javascript 相关文章推荐

JS在IE和FireFox之间常用函数的区别小结

Mar 12 Javascript

深入理解JavaScript是如何实现继承的

Dec 12 Javascript

jQuery防止click双击多次提交及传递动态函数或多参数

Apr 02 Javascript

超链接的禁用属性Disabled使用示例

Jul 31 Javascript

一系列Bootstrap导航条使用方法分享

Apr 29 Javascript

详解Node.js：events事件模块

Nov 24 Javascript

Javascript继承机制详解

May 30 Javascript

layui 给数据表格加序号的方法

Aug 20 Javascript

Vue.js 实现数据展示全部和收起功能

Sep 05 Javascript

vuejs数据超出单行显示更多，点击展开剩余数据实例

May 05 Javascript

超详细的5个Shell脚本实例分享(值得收藏)

Aug 15 Javascript

vue项目部署到nginx/tomcat服务器的实现

Aug 26 Javascript

jquery图片放大镜功能的实例代码

Mar 26 #Javascript

EditPlus注册码生成器(js代码实现)

Mar 25 #Javascript

本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结

Mar 25 #Javascript

JS上传前预览图片实例

Mar 25 #Javascript

js实现杯子倒水问题自动求解程序

Mar 25 #Javascript

js实现上传图片之上传前预览图片

Mar 25 #Javascript

使用jQuery validate 验证注册表单实例演示

Mar 25 #Javascript