编程 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 相关文章推荐

JQuery 常用方法基础教程

Feb 06 Javascript

关于js获取radio和select的属性并控制的代码

May 12 Javascript

jquery数组封装使用方法分享(jquery数组遍历)

Mar 25 Javascript

选择复选框按钮置灰否则按钮可用

May 22 Javascript

JavaScript日期类型的一些用法介绍

Mar 02 Javascript

jQuery EasyUI基础教程之EasyUI常用组件(推荐)

Jul 15 Javascript

JS控制静态页面传递参数并获取参数应用

Aug 10 Javascript

Javascript读写cookie的实例源码

Mar 16 Javascript

vue学习笔记之给组件绑定原生事件操作示例

Feb 27 Javascript

功能完善的小程序日历组件的实现

Mar 31 Javascript

vue-quill-editor的使用及个性化定制操作

Aug 04 Javascript

Javascript使用integrity属性进行安全验证

Nov 07 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