模拟窗口效果 Jquery
生活随笔
收集整理的這篇文章主要介紹了
模拟窗口效果 Jquery
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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>
?
轉載于:https://www.cnblogs.com/yuzhengdong/p/3353631.html
總結
以上是生活随笔為你收集整理的模拟窗口效果 Jquery的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android开发之--Preferen
- 下一篇： 使用CSS sprites减少HTTP请