您的位置:首页 - 教程 - 网页特效 - 正文
仿Windows窗口拖动最大化最小化还原关闭弹窗

效果: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>

评论: