日期:2014-05-17  浏览次数:20801 次

html+css+js实现简易的xp window界面

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