js窗口拖拽改变大小,最小化,最大化,还原,关闭

来源：互联网 2023-03-16 23:57:35 210

js窗口拖拽（改变大小,最小化,最大化,还原,关闭）

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

js窗口拖拽改变大小,最小化,最大化,还原,关闭

书写hmtl代码。

div id="drag">

div class="title">

h2>这是一个可以拖动的窗口/h2>

div>

a class="min" href="#" title="最小化">/a>

a class="max" href="#" title="最大化">/a>

a class="revert" href="#" title="还原">/a>

a class="close" href="#" title="关闭">/a>

/div>

div class="resizeL">/div>

div class="resizeT">/div>

div class="resizeR">/div>

div class="resizeB">/div>

div class="resizeLT">/div>

div class="resizeTR">/div>

div class="resizeBR">/div>

div class="resizeLB">/div>

div class="content">

① 窗口可以拖动；br />

② 窗口可以通过八个方向改变大小；br />

③ 窗口可以最小化、最大化、还原、关闭；br />

④ 限制窗口最小宽度/高度。

/div>

js窗口拖拽改变大小,最小化,最大化,还原,关闭

书写css代码。

body, div, h2 { margin: 0; padding: 0; }

body { background: url(../images/bg.jpg); font: 12px/1.5 \5fae\8f6f\96c5\9ed1; 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(../images/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(../images/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; }

js窗口拖拽改变大小,最小化,最大化,还原,关闭