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

Javascript Math ceil()、floor()、round()三个函数的区别

Mar 09 Javascript

jQuery获取css z-index在各种浏览器中的返回值

Sep 15 Javascript

Firefox中beforeunload事件的实现缺陷浅析

May 03 Javascript

jQuery的Ajax用户认证和注册技术实例教程(附demo源码)

Dec 08 Javascript

深入理解jQuery中的事件冒泡

May 24 Javascript

js实现图片淡入淡出切换简易效果

Aug 22 Javascript

详解jQuery lazyload 懒加载

Dec 19 Javascript

微信小程序之获取当前位置经纬度以及地图显示详解

May 09 Javascript

JavaScript阻止表单提交方法（附代码）

Aug 15 Javascript

JavaScript中使用import 和require打包后实现原理分析

Mar 07 Javascript

AngularJS ui-router刷新子页面路由的方法

Jul 23 Javascript

运用js实现图层拖拽的功能

May 24 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