html css js implements xp window interface and related functions_javascript skills

Note: This program is debugged in IE, other browsers may have bugs, sorry!

Copy code The code is as follows:

<script> <br>alert("XP Window以IE测试,其他浏览器可能有BUG请见谅! 基本功能+四边四角顶部拖拉都已实现!") <br>alert("进行操作前,记得先初始化窗口哦!"); <br><br>/* <br>* create xp window and initialize <br>*/ <br>var myW = new MyWindow(); <br>function initialize() { <br>myW.setBackgroundDiv("mywindow"); <br>myW.setLeftDiv("mywindow_left"); <br>myW.setRightDiv("mywindow_right"); <br>myW.setBottomDiv("mywindow_bottom"); <br>myW.setTopDiv("mywindow_top"); <br>myW.initialEvent(); <br>} <br><br>/* <br>* list button event function <br>*/ <br>function hiddenWindow() { <br>myW.hidden(); <br>} <br><br>function showWindow() { <br>myW.show(); <br>} <br><br>function setAdjust(adj) { <br>myW.setAdjust(adj); <br>} <br><br>function showMaxSize() { <br>myW.showMaxSize(); <br>} <br><br>function getTop() { <br>myW.getTop(); <br>} <br><br>function getLeft() { <br>myW.getLeft(); <br>} <br><br>function getWidth() { <br>myW.getWidth(); <br>} <br><br>function getHeight() { <br>myW.getHeight(); <br>} <br><br>function removeWindow() { <br>myW.removeWindow(); <br>} <br><br>function addObject() { <br>myW.addObject(); <br>} <br><br>function deleteObject() { <br>myW.deleteObject(); <br>} <br><br>/* <br>* drag operation event function <br>*/ <br>function start(idName) { <br>myW.start(idName); <br>} <br><br>function move(idName) { <br>myW.move(idName); <br>} <br><br>function end(idName) { <br>myW.end(idName); <br>} <br><br></script>

• 初始化窗口


• 隐藏窗口


• 显示窗口


• 设置窗口可调整大小


• 设置窗口不可调整大小


• 最大化窗口


• 在窗口中添加对象


• 删除对象


• 得到Top的值


• 得到Left的值


• 得到Width的值


• 得到Height的值


• 释放窗口资源

onmousemove="move('mywindow_botton_right_corner');"
onmouseup="end('mywindow_botton_right_corner');">

onmouseup="end('mywindow_right');">

onmouseup="end('mywindow_left')";>

onmouseup="end('mywindow_top');">

/>
/>
/>

onmouseup="end('mywindow_right_corner');">

onmouseup="end('mywindow_left_corner');">

onmouseup="end('mywindow_rBottom_corner');">

onmouseup="end('mywindow_top_drag');">

onmouseup="end('mywindow_bottom_drag');">

复制代码 代码如下:

/**
* 선택 버튼 설정, 목록을 버튼으로 사용
*/
/* 목록 설정 버튼 */
li {
display: inline;
공백: nowrap;
플로트: 왼쪽;
테두리: 0 단색 흰색;
테두리 오른쪽 너비: 2px;
테두리 하단 너비: 10px;
}
/* 설정 */
a {
배경색: 보라색;
색상: 흰색;
텍스트 장식: 없음;
패딩: 4px 6px;
}

/* set : hover */
a:hover {
background-color: #FF5500;
}

/*
* 모든 div 위치 설정
*/
div {
위치: 절대;
}

/**
* 창 설정
*/
#mywindow {
background-image: url("image/window_bgImage.png");
/* 표시 위치 지정 */
top: 100px;
왼쪽: 200px;
/* 창의 초기화 크기 지정 */
width: 500px;
높이: 400px;
}
/**
* 창의 하단 div 설정
*/
#mywindow_bottom {
배경 이미지: url("image/window_bottom_middle_border.bmp");
백그라운드 반복: 반복-x;
상단: 374px;
왼쪽: 0px;
너비: 100%;
높이: 26px;
}
/* 하단의 드래그 div 설정 */
#mywindow_botton_right_corner {
background-image: url("image/window_control_drag.bmp");
백그라운드 반복: 반복하지 않음;
상단: 8px;
왼쪽: 486px;
너비: 12px;
높이: 12px;
커서: nw-resize;
}

/**
* 창 오른쪽 div 설정
*/
#mywindow_left {
배경 이미지: url("image/window_left_border.bmp");
백그라운드 반복: 반복-y;
상단: 0px;
왼쪽: 0px;
너비: 4px;
높이: 100%;
커서: 전자 크기 조정;
}
/**
* 중앙 div 설정
*/
#central {
상위: 10%;
왼쪽: 10%;
너비: 80%;
높이: 80%;
}

/**
* 창의 왼쪽 div 설정
*/
#mywindow_right {
background-image: url("image/window_right_border.bmp");
백그라운드 반복: 반복-y;
상단: 0px;
왼쪽: 100%;
너비: 4px;
높이: 100%;
커서: 전자 크기 조정;
}

/**
* 창의 최상위 div 설정
*/
#mywindow_top {
배경 이미지: url("image/window_top_header.bmp");
백그라운드 반복: 반복-x;
상단: 0px;
왼쪽: 0px;
너비: 100%;
높이: 30px;
}
/* 상단의 왼쪽 모서리 div 설정 */
#mywindow_top_left_corner {
top: 0px;
왼쪽: 0px;
배경 이미지: url("image/window_top_left_corner.gif");
백그라운드 반복: 반복하지 않음;
너비: 8px;
높이: 100%;
}
/* 상단의 중간 div 설정 및 하단 이미지 설정 */
#mywindow_top_middle {
top: 0px;
왼쪽: 425px;
}
img.button {
float: 오른쪽;
여백: 5px 1px;
}
/* 상단의 오른쪽 모서리 div 설정 */
#mywindow_top_right_corner {
top: 0px;
왼쪽: 498px;
배경 이미지: url("image/window_top_right_corner.bmp");
백그라운드 반복: 반복하지 않음;
너비: 8px;
높이: 100%;
}

#mywindow_right_corner {
상단: 0%;
왼쪽: 100%;
너비: 4px;
높이: 4px;
커서: ne-resize;
}
#mywindow_left_corner {
상단: 0%;
왼쪽: 0%;
너비: 4px;
높이: 4px;
커서: nw-resize;
}
#mywindow_rBottom_corner {
상단: 99%;
왼쪽: 0%;
너비: 4px;
높이: 4px;
커서: ne-resize;
}
#mywindow_top_drag {
상단: 0%;
왼쪽: 2%;
너비: 96%;
높이: 4px;
커서: n-크기 조정;
}
#mywindow_bottom_drag {
상단: 99%;
왼쪽: 2%;
너비: 96%;
높이: 4px;
커서: n-크기 조정;
}

复代码 代码如下:

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 (아래로 && 조정 && !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 {
// 창 오른쪽 모서리 드래그
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();
}
}