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

注意：该程序在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（）;
}
}