JavaScript实现模仿桌面窗口的方法
本文实例讲述了JavaScript实现模仿桌面窗口的方法。分享给大家供大家参考。具体如下：
这里使用JS模仿了桌面窗口的移动、八个方向的缩放、最小化、最大化和关闭，以及双击缩小放大窗口、改变窗口大小的预览效果等功能。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS山寨桌面窗口</title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<styletype="text/css"media="screen">
html,body,div{
margin:0;
padding:0;
}
html,body{
background:#FFFFFF;
width:100%;
height:100%;
overflow:hidden;
}
#box{
position:absolute;
top:30%;
left:40%;
width:250px;
height:150px;
background:#EEE;
border:1pxsolid#666;
border-radius:8px;
box-shadow:2px2px5px#777;
}
/*标题栏*/
#boxHeader{
width:100%;
height:30px;
background:none!important;
background:#EEE;
border-bottom:2pxsolid#AAA;
border-radius:5px5px00;
}
#button{
float:right;
width:79px;
height:15px;
margin:5px5px00!important;
margin:5px2px00;
background:#CCC;
border-radius:5px;
}
#buttondiv{
float:left;
width:25px;
height:15px;
border-right:2px#AAAsolid;
}
#button.close{
border:none;
border-radius:0px5px5px0;
}
#button.minimize{
border-radius:5px005px;
}
/*八个方向*/
/*用于显示变栏颜色，作为测试
#boxN,#boxE,#boxS,#boxW{
background:red;
}
#boxNE,#boxES,#boxSW,#boxWN{
background:green;
}
*/
#boxN{
position:absolute;
top:0;
left:0;
width:100%;
height:5px;
overflow:hidden;
}
#boxE{
position:absolute;
top:0;
right:0;
width:5px;
height:100%;
overflow:hidden;
}
#boxS{
position:absolute;
bottom:0;
left:0;
width:100%;
height:5px;
overflow:hidden;
}
#boxW{
position:absolute;
top:0;
left:0;
width:5px;
height:100%;
overflow:hidden;
}
#boxNE{
position:absolute;
right:0;
top:0;
width:5px;
height:5px;
overflow:hidden;
}
#boxES{
position:absolute;
right:0;
bottom:0;
width:5px;
height:5px;
overflow:hidden;
}
#boxSW{
position:absolute;
left:0;
bottom:0;
width:5px;
height:5px;
overflow:hidden;
}
#boxWN{
position:absolute;
left:0;
top:0;
width:5px;
height:5px;
overflow:hidden;
}
/*显示按钮*/
#showButton{
display:none;
position:absolute;
top:50%;
left:50%;
margin:-75px00-75px;
width:150px;
height:150px;
}
#showButtonspan{
font:50pxbolder;
}
/*改变大小时的预览DIV*/
#virtualBox{
position:absolute;
background:#8EC6FF;
border:1pxsolid#147AFF;
border-radius:8px;
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
<scripttype="text/javascript">
//拖扯box函数
vardragDiv=function(){
varbox=document.getElementById("box");
varboxHeader=document.getElementById("boxHeader");
varbDraging=false;
vardisX=disY=0;
//记录鼠标按下时距离box左、上边框距离
boxHeader.onmousedown=function(event){
bDraging=true;
document.body.style.cursor="move";
varevent=event||window.event;
disX=event.clientX-box.offsetLeft;
disY=event.clientY-box.offsetTop;
//拖动box
document.onmousemove=function(event){
if(!bDraging)returnfalse;
document.body.style.cursor="move";
varevent=event||window.event;
varboxX=event.clientX-disX;
varboxY=event.clientY-disY;
varmaxX=document.body.scrollWidth-box.offsetWidth;
varmaxY=document.body.offsetHeight-box.offsetHeight;
boxX=(boxX<0)?0:boxX;
boxY=(boxY<0)?0:boxY;
boxX=(boxX>maxX)?maxX:boxX;
boxY=(boxY>maxY)?maxY:boxY;
box.style.left=boxX+"px";
box.style.top=boxY+"px";
};
document.onmouseup=function(){
bDraging=false;
document.body.style.cursor="";
};
returnfalse;
};
};
varchangeSize=function(){
varbox=document.getElementById("box");
varvirtualBox=document.getElementById("virtualBox");
varboxSide=document.getElementById("boxSide").getElementsByTagName("div");
varbSizeChanging=bMousedowning=false;
//box是否正在改变&鼠标是否正在按下
varoriginalWidth=box.offsetWidth;
//box最原始宽度
varoriginalHeight=box.offsetHeight;
//box最原始高度
for(vari=0;i<boxSide.length;i++){
//遍历boxside，监听鼠标
boxSide[i].index=i;
boxSide[i].onmouseover=function(){
if(bMousedowning)returnfalse;
changeCursor(true,this.index);
};
boxSide[i].onmouseout=function(){
if(bMousedowning)returnfalse;
changeCursor(false,this.index);
};
boxSide[i].onmousedown=function(event){
varevent=event||window.event;
varindex=this.index;
varaBoxPrevious=newArray();
//记录box上一次的状态
aBoxPrevious["clientX"]=event.clientX;
aBoxPrevious["clientY"]=event.clientY;
aBoxPrevious["left"]=box.offsetLeft;
aBoxPrevious["top"]=box.offsetTop;
aBoxPrevious["width"]=box.offsetWidth;
aBoxPrevious["height"]=box.offsetHeight;
bMousedowning=true;
bSizeChanging=true;
showVirtualBox(virtualBox,aBoxPrevious);
document.onmousemove=function(event){
if(!bSizeChanging)returnfalse;
changeVirtualBoxSize(event,aBoxPrevious,index);
};
document.onmouseup=function(){
changeBoxSize(virtualBox)
hideVirtualBox(virtualBox);
bSizeChanging=false;
bMousedowning=false;
changeCursor(false,index);
};
returnfalse;
};
}
//改变鼠标指针样式
varchangeCursor=function(bIsShowing,index){
if(bIsShowing){
varcursorStyle=["n-resize","e-resize","s-resize","w-resize","ne-resize","se-resize","sw-resize","nw-resize"];
document.body.style.cursor=cursorStyle[index];
}
else{
document.body.style.cursor="";
}
};
//显示预览DIV
varshowVirtualBox=function(virtualBox,aBoxPrevious){
with(virtualBox.style){
display="block";
top=aBoxPrevious["top"]+"px";
left=aBoxPrevious["left"]+"px";
width=aBoxPrevious["width"]+"px";
height=aBoxPrevious["height"]+"px";
}
}
//隐藏预览DIV
varhideVirtualBox=function(virtualBox){
virtualBox.style.display="none";
}
//改变box大小
varchangeVirtualBoxSize=function(event,aBoxPrevious,index){
varevent=event||window.event;
varbTop=bRight=bBottom=bLeft=false;
//八个方向，分别为N、E、S、W、NE、SW、SW、NW
switch(index){
case0:
bTop=true;
break;
case1:
bRight=true;
break;
case2:
bBottom=true;
break;
case3:
bLeft=true;
break;
case4:
bTop=bRight=true;;
break;
case5:
bRight=bBottom=true;
break;
case6:
bBottom=bLeft=true;
break;
case7:
bLeft=bTop=true;
break;
default:
break;
}
//向北改变高度
if(bTop){
varnewTopHeight=aBoxPrevious["height"]-(event.clientY-aBoxPrevious["clientY"]);
(newTopHeight<originalHeight)&&(newTopHeight=originalHeight);
(newTopHeight>aBoxPrevious["top"]+aBoxPrevious["height"])&&(newTopHeight=aBoxPrevious["top"]+aBoxPrevious["height"]);
varnewTop=aBoxPrevious["top"]+(event.clientY-aBoxPrevious["clientY"]);
(newTop>aBoxPrevious["top"]+aBoxPrevious["height"]-originalHeight)&&(newTop=aBoxPrevious["top"]+aBoxPrevious["height"]-originalHeight);
(newTop<0)&&(newTop=0);
virtualBox.style.top=newTop+"px";
virtualBox.style.height=newTopHeight-box.clientTop*2+"px";
//不能忽略border-width
bTop=false;
}
//向东改变宽度
if(bRight){
varnewRightWidth=aBoxPrevious["width"]+(event.clientX-aBoxPrevious["clientX"]);
(newRightWidth<originalWidth)&&(newRightWidth=originalWidth);
(newRightWidth>document.body.scrollWidth-aBoxPrevious["left"])&&(newRightWidth=document.body.scrollWidth-aBoxPrevious["left"]);
virtualBox.style.width=newRightWidth-box.clientTop*2+"px";
bRight=false;
}
//向南改变高度
if(bBottom){
varnewBottomHeight=aBoxPrevious["height"]+(event.clientY-aBoxPrevious["clientY"]);
(newBottomHeight<originalHeight)&&(newBottomHeight=originalHeight);
(newBottomHeight>document.body.scrollHeight-aBoxPrevious["top"])&&(newBottomHeight=document.body.scrollHeight-aBoxPrevious["top"]);
virtualBox.style.height=newBottomHeight-box.clientTop*2+"px";
bBottom=false;
}
//向西改变宽度
if(bLeft){
varnewLeftWidth=aBoxPrevious["width"]-(event.clientX-aBoxPrevious["clientX"]);
(newLeftWidth<originalWidth)&&(newLeftWidth=originalWidth);
(newLeftWidth>aBoxPrevious["left"]+aBoxPrevious["width"])&&(newLeftWidth=aBoxPrevious["left"]+aBoxPrevious["width"]);
varnewLeft=aBoxPrevious["left"]+(event.clientX-aBoxPrevious["clientX"]);
(newLeft>aBoxPrevious["left"]+aBoxPrevious["width"]-originalWidth)&&(newLeft=aBoxPrevious["left"]+aBoxPrevious["width"]-originalWidth);
(newLeft<0)&&(newLeft=0);
virtualBox.style.left=newLeft+"px";
virtualBox.style.width=newLeftWidth-box.clientLeft*2+"px";
bLeft=false;
}
};
varchangeBoxSize=function(virtualBox){
with(box.style){
left=virtualBox.style.left;
top=virtualBox.style.top;
width=virtualBox.style.width;
height=virtualBox.style.height;
}
}
};
//窗口按钮函数
boxButton=function(){
varbox=document.getElementById("box");
varboxHeader=document.getElementById("boxHeader");
varaButton=document.getElementById("button").getElementsByTagName("div");
varshowButton=document.getElementById("showButton");
varspan=showButton.getElementsByTagName("span")[0];
varbIsMin=bIsMax=false;
//目前状态是否最小or最大
boxHeader.ondblclick=function(){
maximize();
}
for(vari=0;i<aButton.length;i++){
aButton[i].index=i;
aButton[i].onmouseover=function(){
aButton[this.index].style.background="#AAA";
document.body.style.cursor="pointer";
};
aButton[i].onmouseout=function(){
aButton[this.index].style.background="";
document.body.style.cursor=""
};
aButton[i].onclick=function(){
switch(this.index){
case0:
minimize();
break;
case1:
maximize();
break;
case2:
close();
break;
default:
break;
}
};
}
varminimize=function(){
if(bIsMin){
resumeBox();
bIsMin=false;
}
else{
box.style.width="89px";
box.style.height="32px";
box.style.left="2%";
box.style.top=document.body.offsetHeight-box.offsetHeight-15+"px";
bIsMin=true;
bIsMax=false;
}
};
varmaximize=function(){
if(bIsMax){
resumeBox();
bIsMax=false;
}
else{
box.style.width=document.body.scrollWidth-10+"px";
box.style.height=document.body.scrollHeight-10+"px";
box.style.left="5px";
box.style.top="5px";
bIsMax=true;
bIsMin=false;
}
};
varclose=function(){
box.style.display="none";
showButton.style.display="block";
};
varresumeBox=function(){
box.style.top="30%";
box.style.left="40%";
box.style.width="250px";
box.style.height="150px";
};
showButton.onmousedown=function(){
span.innerHTML="^o^";
};
showButton.onclick=function(){
this.style.display="none";
span.innerHTML=">_<";
resumeBox();
box.style.display="block";
};
};
window.onload=function(){
changeSize();
dragDiv();
boxButton();
};
</script>
</head>
<body>
<divid="box">
<divid="boxHeader">
<divid="button">
<divclass="minimize"></div>
<divclass="maximize"></div>
<divclass="close"></div>
</div>
</div>
<divid="boxSide">
<divid="boxN"></div>
<divid="boxE"></div>
<divid="boxS"></div>
<divid="boxW"></div>
<divid="boxNE"></div>
<divid="boxES"></div>
<divid="boxSW"></div>
<divid="boxWN"></div>
</div>
</div>
<buttonid="showButton"><span>>_<</span><p>居然关掉人家，讨厌~</p><p>快打开</p></button>
<divid="virtualBox"></div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。