① 窗口可以拖动;
② 窗口可以通过八个方向改变大小;
③ 窗口可以最小化、最大化、还原、关闭;
④ 限制窗口最小宽度/高度。
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部分中每个功能对应一个函数。包括拖拽事件、最大化事件、最小化事件等。