日期:2014-05-17 浏览次数:21076 次
XP WINDOW 由细小图片组成的,共有几十个小图片,拼出一个完整的xp window界面!
XP WINDOW仅用来联系html+css+js的知识,不足之处请见谅!
代码地址:(代码可优化,此代码在IE8上测试无问题,其他浏览器未测试)
http://download.csdn.net/detail/hai8902882/5205746

//JS代码,mywindow.js
function MyWindow(windowName, top, left, width, height) {
// old values of window
var oldTop = 100;
var oldLeft = 200;
var oldWidth = 500;
var oldHeight = 400;
// record x,y coordinate of click top div
var clickTopDivX;
var clickTopDivY;
// record whether window is max size
var maxSize = false;
// record whether window is adjust
var adjust = true;
// record whether user click in window
var clickInWindow = false;
// five component div
var bgDiv;
var bottomDiv;
var rightDiv;
var leftDiv;
var centralDiv;
var topDiv;
// other child div
var bottomRightCorner;
var topLeftDivCorner;
var topTitileDiv;
var topButtonDiv;
var topRightCorner;
// image button
var closeButton;
var maxButton;
var minButton;
// drag div
var dragTopRightCorner;
var dragTopLeftCorner;
var dragBottomLeftCorner;
var dragTop;
var dragBottom;
/**
* create element and set attribute
*/
// background div
bgDiv = document.createElement("div");
bgDiv.setAttribute("id", "mywindow");
document.body.appendChild(bgDiv);
// bottom div and child div
bottomDiv = document.createElement("div");
bottomDiv.setAttribute("id", "mywindow_bottom");
bgDiv.appendChild(bottomDiv);
bottomRightCorner = document.createElement("div");
bottomRightCorner.setAttribute("id", "mywindow_bottom_right_corner");
bottomDiv.appendChild(bottomRightCorner);
// right div
rightDiv = document.createElement("div");
rightDiv.setAttribute("id", "mywindow_right");
bgDiv.appendChild(rightDiv);
// left div
leftDiv = document.createElement("div");
leftDiv.setAttribute("id", "mywindow_left");
bgDiv.appendChild(leftDiv);
// central div
centralDiv = document.createElement("div");
centralDiv.setAttribute("id", "mywindow_central");
bgDiv.appendChild(centralDiv);
//top div and child div
topDiv = document.createElement("div");
topDiv.setAttribute("id", "mywindow_top");
bgDiv.appendChild(topDiv);
topLeftDivCorner = document.createElement("div");
topLeftDivCorner.setAttribute("id", "mywindow_top_left_corner");
topDiv.appendChild(topLeftDivCorner);
topTitileDiv = document.createElement("div");
topTitileDiv.setAttribute("id", "mywindow_top_title");
topTitileDiv.innerHTML = "@Pluser";
topDiv.appendChild(topTitileDiv);
topButtonDiv = document.createElement("div");
topButtonDiv.setAttribute("id", "mywindow_top_button");
topDiv.appendChild(topButtonDiv);
closeButton = document.createElement("img");
closeButton.setAttribute("id", "top_close_button");
closeButton.setAttribute("class", "button");
closeButton.src = "image/window_control_close_blur.bmp";
topButtonDiv.appendChild(closeButton);
maxButton = document.createElement("img");
maxButton.setAttribute("id", "top_max_button");
maxButton.setAttribute("class", "button");
maxButton.src = "imag