当前位置: 代码迷 >> HTML/CSS >> html+css+js兑现xp window界面及有关功能
  详细解决方案

html+css+js兑现xp window界面及有关功能

热度:213   发布时间:2013-03-28 10:20:24.0
html+css+js实现xp window界面及有关功能
注意: 该程序在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();	
	}
}



  相关解决方案