① 窗口可以拖动;
② 窗口可以通过八个方向改变大小;
③ 窗口可以最小化、最大化、还原、关闭;
④ 限制窗口最小宽度/高度。
body,div,h2 {
margin:0;
padding:0;
}
body {
background:url(img/bg.jpg);
font:12px/1.5 \5fae\8f6f\96c5\9ed1;
color:#333;
}
/* drag */
#drag {
position:absolute;
top:100px;
left:100px;
width:300px;
height:160px;
background:#e9e9e9;
border:1px solid #444;
border-radius:5px;
box-shadow:0 1px 3px 2px #666;
}
#drag .title {
position:relative;
height:27px;
margin:5px;
}
#drag .title h2 {
font-size:14px;
height:27px;
line-height:24px;
border-bottom:1px solid #A1B4B0;
}
#drag .title div {
position:absolute;
height:19px;
top:2px;
right:0;
}
#drag .title a,a.open {
float:left;
width:21px;
height:19px;
display:block;
margin-left:5px;
background:url(img/tool.png) no-repeat;
}
a.open {
position:absolute;
top:10px;
left:50%;
margin-left:-10px;
background-position:0 0;
}
a.open:hover {
background-position:0 -29px;
}
#drag .title a.min {
background-position:-29px 0;
}
#drag .title a.min:hover {
background-position:-29px -29px;
}
#drag .title a.max {
background-position:-60px 0;
}
#drag .title a.max:hover {
background-position:-60px -29px;
}
#drag .title a.revert {
background-position:-149px 0;
display:none;
}
#drag .title a.revert:hover {
background-position:-149px -29px;
}
#drag .title a.close {
background-position:-89px 0;
}
#drag .title a.close:hover {
background-position:-89px -29px;
}
#drag .content {
overflow:auto;
margin:0 5px;
}
#drag .resizeBR {
position:absolute;
width:14px;
height:14px;
right:0;
bottom:0;
overflow:hidden;
cursor:nw-resize;
background:url(img/resize.png) no-repeat;
}
#drag .resizeL,#drag .resizeT,#drag .resizeR,#drag .resizeB,#drag .resizeLT,#drag .resizeTR,#drag .resizeLB {
position:absolute;
background:#000;
overflow:hidden;
opacity:0;
filter:alpha(opacity=0);
}
#drag .resizeL,#drag .resizeR {
top:0;
width:5px;
height:100%;
cursor:w-resize;
}
#drag .resizeR {
right:0;
}
#drag .resizeT,#drag .resizeB {
width:100%;
height:5px;
cursor:n-resize;
}
#drag .resizeT {
top:0;
}
#drag .resizeB {
bottom:0;
}
#drag .resizeLT,#drag .resizeTR,#drag .resizeLB {
width:8px;
height:8px;
background:#FF0;
}
#drag .resizeLT {
top:0;
left:0;
cursor:nw-resize;
}
#drag .resizeTR {
top:0;
right:0;
cursor:ne-resize;
}
#drag .resizeLB {
left:0;
bottom:0;
cursor:ne-resize;
}
说明:效果中最主要部分是CSS部分以及JS部分。其中CSS部分主要是设置窗口DIV样式的可操作性,如拖动、最大化、最小化事件触发时候的样式切换等。
js部分中每个功能对应一个函数。包括拖拽事件、最大化事件、最小化事件等。