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>