您的位置：首页 > Web前端 > JQuery

模拟窗口效果 Jquery

2013-10-06 14:45 465 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>模拟窗口效果</title>
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var centerwin = $("#center");
var leftwin = $("#left");

$("#centerpop").click(function () {
centerwin.show("slow");
});

$("#leftpop").click(function () {
leftwin.slideDown("slow");
});
setTimeout(function () {
centerwin.mywin({ left: "center", top: "center" });
leftwin.mywin({ left: "left", top: "top" }, function () {
$("#left").slideUp();
});
var windowobj = $(window);
var currentwin = $("#right");
var browserwidth = windowobj.width();
var browserheight = windowobj.height();
var scrollLeft = windowobj.scrollLeft();
var scrollTop = windowobj.scrollTop();
var cwinwidth = currentwin.outerWidth(true); //为true的话包含margin的值
var cwinheight = currentwin.outerHeight(true);

$("#right").mywin(
{ left: "right", top: "bottom" },
function () { $("#right").hide(); },
{ left: scrollLeft + browserwidth - cwinwidth, top: scrollTop + browserheight }
).fadeOut(15000).dequeue();

}, 200);

});

/**
*@param position表示窗口最终的位置包含两个属性，一个是left一个是top；
*@param hidefuc表示执行窗口影藏的方法；
*@param initPos表示窗口的初始位置，包含2个属性，一个是left一个是top；
*/
$.fn.mywin = function (position, hidefuc, initPos) {
if (position && position instanceof Object) {
var left;
var top;
var windowobj = $(window);
var currentwin = this;
var cwinwidth; //为true的话包含margin的值
var cwinheight;

var browserwidth;
var browserheight;
var scrollLeft;
var scrollTop;

function getBrowserDim() {
browserwidth = windowobj.width();
browserheight = windowobj.height();
scrollLeft = windowobj.scrollLeft();
scrollTop = windowobj.scrollTop();
}

//浏览器可视区域的宽度和高度
//当前窗框的宽和高
//要考虑到横向滚动条的当前左边界值以及纵向滚动条的当前上边界值
var positionleft = position.left;
var positiontop = position.top;
//计算窗口真实的左边界值
function callLeft(positionleft, scrollLeft, browserwidth, cwinwidth) {
if (positionleft && typeof positionleft == "string") {
if (positionleft == "center") {
left = scrollLeft + (browserwidth - cwinwidth) / 2;
} else if (positionleft == "left") {
left = scrollLeft;
} else if (positionleft == "right") {
left = scrollLeft + browserwidth - cwinwidth;
} else {
left = scrollLeft + (browserwidth - cwinwidth) / 2;
}
} else if (positionleft && typeof positionleft == "number") {
left = positionleft;
} else {
left = 0;
}

}

//计算窗口真实的上边界值
function callTop(positiontop, scrollTop, browserheight, cwinheight) {
if (positiontop && typeof positiontop == "string") {
if (positiontop == "center") {
top = scrollTop + (browserheight - cwinheight) / 2;
} else if (positiontop == "top") {
top = scrollTop;
} else if (positiontop == "bottom") {
top = scrollTop + browserheight - cwinheight;
} else {
top = scrollTop + (browserheight - cwinheight) / 2;
}
} else if (positiontop && typeof positiontop == "number") {
top = positiontop;
} else {
top = 0;
}

}

//移动窗口
function moveWin() {
callLeft(currentwin.data("positionleft"), scrollLeft, browserwidth, cwinwidth);
callTop(currentwin.data("positiontop"), scrollTop, browserheight, cwinheight);
currentwin.animate({
left: left,
top: top
}, 600);
}

//初始化时
if (initPos && initPos instanceof Object) {
var initLeft = initPos.left;
var initTop = initPos.top;
if (initLeft && typeof initLeft == "number") {
currentwin.css("left", initLeft);
} else {
currentwin.css("left", 0);
}
if (initTop && typeof initTop == "number") {
currentwin.css("top", initTop);
} else {
currentwin.css("top", 0);
}
currentwin.show();
}
cwinwidth = currentwin.outerWidth(true); //为true的话包含margin的值
cwinheight = currentwin.outerHeight(true);
currentwin.data("positionleft", positionleft);
currentwin.data("positiontop", positiontop);
getBrowserDim();
moveWin();

//浏览器滚动条滚动时，重新移动窗口的位置
var scrollTimeout;
$(window).scroll(function () {
//判断当前窗口是否可见
if (!currentwin.is(":visible")) {
return;
}
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(function () {
getBrowserDim();
moveWin();
}, 300);

});

//浏览器大小变化时，重新移动窗口的位置
$(window).resize(function () {
//判断当前窗口是否可见
if (!currentwin.is(":visible")) {
return;
}
getBrowserDim();
moveWin();
});
currentwin.children(".title").children("img").click(function () {
if (!hidefuc) {
currentwin.hide("slow");
} else {
hidefuc();
}
});
return currentwin;
}

}
</script>

<style type="text/css">
.windows
{
background-color:#D0DEF0;
width:250px;
/*padding:2px;*/
margin:5px;
position:absolute;
display:none;
}
.content
{
height:150px;
background-color:White;
border:3px solid #D0DEF0;
padding:5px;
overflow:auto;/*控制区域内容超过指定高度和宽度时自动显示滚动条*/
}
.title img
{
width:15px;
height:15px;
float:right;
cursor:pointer;
margin:2px;
}
.title
{
padding:2px;
font-size:15px;
}

</style>
</head>
<body>

<input type="button" value="左下角显示窗口" id="leftpop"/>
<input type="button" value="中间显示窗口" id="centerpop"/>
<div class="windows" id="center">
<div class="title">
<img alt="关闭" src="../images/close.gif" />
我是中间显示窗口标题

</div>
<div class="content">
我是中间显示窗口内容
</div>
</div>
<div class="windows" id="left">
<div class="title">
<img alt="关闭" src="../images/close.gif" />
我是左边显示窗口标题
</div>
<div class="content">我是左边显示窗口内容</div>
</div>
<div class="windows" id="right">
<div class="title">
<img alt="关闭" src="../images/close.gif" />
我是右下角显示窗口标题
</div>
<div class="content">我是右下角显示窗口内容</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航