javascript实现漂亮的拖动层,窗口拖拽特效
窗口拖拽(改变大小/最小化/最大化/还原/关闭) body,div,h2{margin:0;padding:0;} body{background:url(/jscss/demoimg/201205/bg.jpg);font:12px/1.5 5fae8f6f96c59ed1;color:#333;} #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(/jscss/demoimg/201205/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(/jscss/demoimg/201205/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;} 这是一个可以拖动的窗口 ① 窗口可以拖动;
② 窗口可以通过八个方向改变大小;
③ 窗口可以最小化、最大化、还原、关闭;
④ 限制窗口最小宽度/高度。
以上所述就是本文的全部内容了,希望大家能够喜欢。



