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 type="text/css" href="https://www.jb51.net/main.css" />

<!--
-- JavaScript
-- set function
-->
<script language="JavaScript" src="https://www.jb51.net/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="#">初始化窗口</a></li>
<li><a href="#">隐藏窗口</a></li>
<li><a href="#">显示窗口</a></li>
<li><a href="#">设置窗口可调整大小</a></li>
<li><a href="#">设置窗口不可调整大小</a></li>
<li><a href="#">最大化窗口</a></li>
<li><a href="#">在窗口中添加对象 </a></li>
<li><a href="#">删除对象</a></li>
<li><a href="#">得到Top的值</a></li>
<li><a href="#">得到Left的值</a></li>
<li><a href="#">得到Width的值</a></li>
<li><a href="#">得到Height的值</a></li>
<li><a href="#">释放窗口资源</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>
<!-- set bottom div -->
<div>
<div onmousedown="start('mywindow_botton_right_corner');"
onmousemove="move('mywindow_botton_right_corner');"
onmouseup="end('mywindow_botton_right_corner');">
</div>
</div>

<!-- set right div -->
<div onmousedown="start('mywindow_right');" onmousemove="move('mywindow_right');"
onmouseup="end('mywindow_right');">
</div>

<!-- set left div -->
<div 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 onmousedown="start('mywindow_top');" onmousemove="move('mywindow_top');"
onmouseup="end('mywindow_top');">
<div>
</div>
<div>
<img src="https://www.jb51.net/image/window_control_close_blur.bmp"
/>
<img src="https://www.jb51.net/image/window_control_max_blur.bmp"
/>
<img src="https://www.jb51.net/image/window_control_min_blur.bmp"
/>
</div>
<div>
</div>
</div>

<!-- set corner of drag window -->
<div onmousedown="start('mywindow_right_corner');" onmousemove="move('mywindow_right_corner');"
onmouseup="end('mywindow_right_corner');">
</div>
<div onmousedown="start('mywindow_left_corner');" onmousemove="move('mywindow_left_corner');"
onmouseup="end('mywindow_left_corner');">
</div>
<div onmousedown="start('mywindow_rBottom_corner');" onmousemove="move('mywindow_rBottom_corner');"
onmouseup="end('mywindow_rBottom_corner');">
</div>

<!-- set border of drag window -->
<div onmousedown="start('mywindow_top_drag');" onmousemove="move('mywindow_top_drag');"
onmouseup="end('mywindow_top_drag');"></div>
<div onmousedown="start('mywindow_bottom_drag');" onmousemove="move('mywindow_bottom_drag');"
onmouseup="end('mywindow_bottom_drag');"></div>
</div>
</body>
</html>


复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wddyww.html