效果：http://hovertree.com/texiao/layer/2/
仿Windows窗口拖動最大化最小化還原關閉彈窗，可以雙擊最大化和還原。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿Windows窗口拖動最大化最小化還原彈窗 - 何問起</title><base target="_blank" />
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
//定義各個DOM元素及按鈕，obj是整個窗口，objcurs窗口的導航，guan是窗口關閉按鈕，xiao是縮小到任務欄按鈕，max是最大化窗口按鈕
var obj = $('.hovertreewindow'), objcur = $('.hovertreewindow .hovertreenav'), guan = $('.hovertreewindow .hovertreeguan'), xiao = $('.hovertreewindow .hovertreexiao'), max = $('.hovertreewindow .hovertreemax');
//定義所有變量，tuo為鼠標是否在導航上按下
var tuo = false;
//記錄窗口最小最大前的位置及寬高
var lefts, tops, widths, heights;
//這裡獲取窗口元素的寬高，用於窗口最小最大後還原窗口，因為窗口在真正的項目中是可以拉大拉小的，而我這裡沒有開發此功能
widths = obj.width();
heights = obj.height();
var X, Y;
objcur.mousedown(function (e) {
X = e.pageX - obj.offset().left;
Y = e.pageY - obj.offset().top;
tuo = true;
})
$(document).mousemove(function (e) {
//如果當前窗口為100%則不允許拖動
if (obj.width() == $(document).width()) {
tuo = false;
}
if (tuo) {
obj.css({
left: e.pageX - X,
top: e.pageY - Y
})
lefts = obj.offset().left;
tops = obj.offset().top;
}
}).mouseup(function () {
tuo = false;
})
//窗口最大化
var shu = 0;
//雙擊導航框縮放窗口
objcur.dblclick(function () {
max.click();
})
//單擊縮放按鈕縮放窗口
max.click(function () {
if (shu == 0) {
obj.animate({
width: '100%',
height: '100%',
left: '0px',
top: '0px'
}, 200);
shu = 1;
} else if (shu == 1) {
obj.animate({
width: widths,
height: heights,
left: lefts,
top: tops
}, 200);
shu = 0;
}
})
//關閉窗口，也就刪除了DOM元素
guan.click(function () {
obj.remove();
})
//縮小到任務欄
var xiaos = 1;
xiao.click(function () {
if (xiaos == 1) {
var s = $(document).height();//此處獲取浏覽器可視窗口的高度，也存在問題，當我們的窗口拉到浏覽器上或下可視窗口外的時候，那麼浏覽器可視窗口的高度也被增大了，所以當我們的窗口拉到浏覽器可視窗口上或下的外面的時候，我們縮小窗口到任務欄的話就將看不到縮小後的窗口，最簡單的辦法就是把此變量設置成全局變量，當頁面加載的時候此變量就初始化了就不會被窗口拉出的時候增大
obj.animate({
left: '0px',
top: s - 24,
width: '150px',
height: '24px'
}, 200);
xiaos = 0;
} else if (xiaos == 0) {
obj.animate({
width: widths,
height: heights,
left: lefts,
top: tops
}, 200);
xiaos = 1;
}
})
});
</script>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
font-size: 12px;
overflow: hidden;
margin: 0px;
padding: 0px;
position: relative;
}
.hovertreewindow {
width: 300px;
height: 200px;
background: red;
overflow: hidden;
position: absolute;
bottom:10px;
right:10px;
z-index: 99;
color: white;
border: 1px solid silver;
}
.hovertreewindow p {
background: green;
cursor: pointer;
color: #fff;
margin: 0px;
height: 24px;
line-height: 24px;
}
.hovertreewindow p span {
float: right;
margin-right: 5px;
background: blue;
}
</style>
</head>
<body>
<div class="hovertreewindow">
<p class="hovertreenav">
按下我才能拖拽
<span class="hovertreeguan">X</span>
<span class="hovertreemax">口</span>
<span class="hovertreexiao">--</span>
</p>
按住綠色部分，可以拖動。可以最大化，最小化，還原。支持雙擊綠色標題欄。<a href="http://hovertree.com/h/bjaf/9ly3a73t.htm">原文</a> <a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/texiao/">特效</a>
</div>
</body>
</html>