html+css+js实现xp window界面及有关功能_javascript技巧

注意： 该程序在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();
}
}

时间： 2024-03-19 20:44:45

html+css+js实现xp window界面及有关功能_javascript技巧的相关文章

JS实现图片上传预览功能_javascript技巧

废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> </head> <body&g

JS实现六位字符密码输入器功能_javascript技巧

老规矩~ 上DEMO,过过瘾先:六位字符密码输入器 再上源码:六位字符密码输入器 从DEMO中我看可以看出,首先只能输入六个字符,并且仅允许输入数字,在输入六位数字完成之后会自动执行一个回调(DEMO中是将输入结果显示出来了) 一. 先说原理 首先呢,我们需要两个东东:其一是一个真是的输入框,即:真正处于焦点状态并获取用户输入的input:其二是一组伪输入框,即:并没有真正获取焦点,但只是显示了当前输入的值(当然啦,密码嘛,只有一个小黑点而已~). 其次呢,我们需要简单不惧一下,让着一组(6个)

仅一个form表单 js实现注册信息依次填写提交功能_javascript技巧

我们原先是一个很长的form表单,里面有很多选项.客户反馈这样不够友好,容易看花眼.因此进行改进,实现多步骤进度,多个提交的实现(其实只有一个form提交). 实现的思路:将表单的选项装入多个div中,一个显示,其他隐藏. 实现效果如下: 1.JavaScript代码 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/j

js中利用cookie实现记住密码功能_javascript技巧

在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse response Cookie username = new Cookie("username ","cookievalue"); Cookie password = new Cookie("password ","cookievalue&quo

js利用clipboardData实现截屏粘贴功能_javascript技巧

本文实例为大家分享了clipboardData截屏粘贴实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>copyimg</title> <style type="text/css"> #box{ width:200px; height:20

js控件Kindeditor实现图片自动上传功能_javascript技巧

Kindeditor是一款功能强大的开源在线HTML编辑器,支持所见即所得的编辑效果.它使用JavaScript编写,可以无缝地与多个不同的语言环境进行集成,如.NET.PHP.ASP.Java等.官方网站可以查看这里:http://kindeditor.net/index.php Kindeditor本身提供了许多非常实用的插件,由于代码开源,开发人员可以根据需要对其进行任意扩展和修改. 在使用Kindeditor编辑网站内容时考虑这样一个场景:编辑人员往往会从其它页面或者Word文档将内容复

js实现发送验证码后的倒计时功能_javascript技巧

之前分享过只用js实现倒计时的功能,后来测试时发现,刷新或关闭网页后,倒计时就不能用了.网上也没找到合适的解决方案,所以自己就写了个,这次的算是优化版吧,能满足刷新或重新打开网页后,倒计时依然能用 特别说明:      cookie最初创建的有效时间是60秒.也就是说,你如果在倒计时为20的时候,关闭网页.20秒之后再打开,是不会有倒计时显示的;但是,如果倒计时为20时,关闭页面,如果在20秒内重新打开页面,是有倒计时显示的. html代码 <input id="second"

js Dialog 去掉右上角的X关闭功能_javascript技巧

再用到 dialog弹出框时,不想要右上角的X 关闭功能,只是做个提示信息显示. 在网上找了一些资料.网上找了三种解决方案:[第一种是可用的.] 1. 复制代码 代码如下: $("#div1").dialog({ closeOnEscape:false, open:function(event,ui){$(".ui-dialog-titlebar-close").hide();} }); 不希望用户通过jquery dialog 提供的x按钮关闭弹出框,这种方法的作

Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能_php实例

本文实例讲述了Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能.分享给大家供大家参考,具体如下: 扩展插件下载地址,解压后复制到/protected/vendor/ https://github.com/muayyad-alsadi/yii-EClientScript main配置文件配置插件,components里面增加 //js,css代码压缩,合并 'clientScript' => array( 'class' => 'application.ven