jQuery實現(xiàn)優(yōu)雅的彈窗效果（6）

彈窗是網(wǎng)頁中經(jīng)?？吹降男Ч?，以前的彈窗是用window.open()等方式在瀏覽器窗口新建另一個新窗口來完成的，這種彈窗方式現(xiàn)在已經(jīng)被很多瀏覽器所攔截。今天我們來用更加友好的方式來實現(xiàn)彈窗效果。完成的功能效果如圖：

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供宿州網(wǎng)站建設、宿州做網(wǎng)站、宿州網(wǎng)站設計、宿州網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、宿州企業(yè)網(wǎng)站模板建站服務，十多年宿州做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

如圖，在瀏覽器的左上方是兩個button按鈕，按下之后分別彈出左下角的窗口和中間的窗口，右下角的窗口當頁面加載完成之后自動慢慢顯示，之后又徐徐的淡出?；赿iv+css的模式，我們的先來建立html頁面。

window.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery實戰(zhàn):窗口效果</title>
<link type="text/css" rel="stylesheet" href="../css/window.css" rel="external nofollow" />
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/window.js"></script>
</head>
<body>
 <input type="button" value="左下角顯示窗口" id="leftpop" />
 <input type="button" value="屏幕中間顯示窗口" id="centerpop" />

 <div class="window" id="left">
 <div class="title">
  <img alt="關閉" src="../image/close.gif" />
  我是左邊顯示窗口的標題欄
 </div>
 <div class="content">
  我是左邊顯示窗口的內(nèi)容區(qū)
 </div>
 </div>
 <div class="window" id="center">
 <div class="title">
  <img alt="關閉" src="../image/close.gif" />
  我是中間顯示窗口的標題欄
 </div>
 <div class="content">
  <p>我是中間顯示窗口的內(nèi)容區(qū)</p>
 </div>
 </div> 
 <div class="window" id="right">
 <div class="title">
  <img alt="關閉" src="../image/close.gif" />
  我是右邊顯示窗口的標題欄
 </div>
 <div class="content">
  我是右邊顯示窗口的內(nèi)容區(qū)
 </div>
 </div>
</body>
</html>

從html代碼中可以看到，這里的窗口是用div來實現(xiàn)的，目前的html代碼只是描繪了頁面的基本骨架，能夠效果離窗口效果還相差甚遠，不過別急，添加上css代碼，頁面相對就好看多了。

window.css

.window {
 background-color: #D0DEF0;
 width: 250px;
 /*padding: 2px;*/
 margin: 5px;
 /*控制窗口絕對定位*/
 position: absolute;
 display: none;
}
.content {
 height: 150px;
 background-color: white;
 border: 2px solid #D0DEF0;
 padding: 2px;
 /*控制區(qū)域內(nèi)容超過指定高度和寬度時顯示滾動條*/
 overflow: auto;
}
.title {
 padding: 4px;
 font-size: 14px;
}
.title img {
 width: 14px;
 height: 14px;
 float: right;
 cursor: pointer;
}

為了看到當前效果，先將.window的display屬性注釋掉，或者將它的屬性值改為”block”，看到的效果如圖：

jQuery實現(xiàn)優(yōu)雅的彈窗效果（6）

其實三個窗口是由三個div組成,每個div分為title和content兩部分，title是標題欄區(qū)域，content是內(nèi)容區(qū)域。為了達到窗口的視覺效果，給我們的title標題欄區(qū)域加背景顏色background-color，然后給我們的content內(nèi)容區(qū)域加邊框border: 2px solid #D0DEF0;，邊框的顏色與標題欄一致。此時的效果如上圖，目前只能看到一個窗口的原因是三個div占據(jù)了相同的位置，第三個窗口遮蓋住了前兩個窗口。不過沒關系，我們可以用JavaScript代碼來控制三個div的位置。

jQuery庫函數(shù)提供了豐富多彩的插件功能，今天我們來編寫自己的插件，簡單的案例如下：

$.fn.hello = function() {
 alert("hello:" + this.val());
 return this;
}

只需要在需要的地方注冊上本插件就行了。相應的，這里我們編寫的插件mywin來專門處理我們的窗口功能效果。

window.js

/**
* 窗口位置的插件
*/
$.fn.mywin = function() {
 var windowobj = $(window);
 var browserWidth = $(window).width();
 var browserHeight = $(window).height();
 var scrollLeft = $(window).scrollLeft();
 var scrollTop = $(window).scrollTop();
 var cwinwidth = this.width();
 var cwinheight = this.height();
 var left = scrollLeft + (browserWidth - cwinwidth)/2;
 var top = cwinheight + (browserHeight - cwinheight)/2;
 this.css("left", left).css("top", top);
 $(this.children(".title").children("img")).click(function() {
 $(this).parent().parent().hide("slow");
 });

 return this;
}

上訴代碼編寫了本應用中中間窗口案例的插件，調用代碼如下：

window.js

$(document).ready(function() {
 $("#centerpop").click(function() {
 $("#center").mywin().show("slow");
 });
});

插件中的代碼思路是：為了計算窗口div的left和top屬性值，我們需要拿到瀏覽器窗口的長browserWidth和寬browserHeight，以及窗口是否因為內(nèi)容過多而又滾動條的位置scrollLeft和scrollTop。窗口div的left值=滾動條橫坐標+(瀏覽器窗口的橫向長度-窗口div橫向長度)/2，top值=滾動條縱坐標+(瀏覽器窗口的縱向長度-窗口div縱向長度)/2。

最終完成完整的jQuery代碼如下：

$(document).ready(function(){
 var centerwin = $("#center");
 var leftwin = $("#left");
 var rightwin = $("#right");
 $("#centerpop").click(function(){
 //鼠標點擊按鈕之后，把id為center的窗口顯示在頁面中間
 //計算位于屏幕中間的窗口的左邊界和上邊界的值
 //瀏覽器可視區(qū)域的寬和高，當前窗口的寬和高
 //需要考慮到橫向滾動條的當前左邊界值以及縱向滾動條的當前上邊界值
 centerwin.show("slow");
 });
 $("#leftpop").click(function() {
 leftwin.slideDown("slow");
 });

 setTimeout(function () {
 centerwin.mywin({left: "center", top: "center"});
 leftwin.mywin({left: "left", top: "bottom"}, function(){
  leftwin.slideUp("slow");
 });
 var windowobj = $(window);
 var cwinwidth = rightwin.outerWidth(true);
 var cwinheight = rightwin.outerHeight(true);
 var browserwidth = windowobj.width();
 var browserheight = windowobj.height();
 var scrollLeft = windowobj.scrollLeft();
 var scrollTop = windowobj.scrollTop();
 var rleft = scrollLeft + browserwidth - cwinwidth;
 if ($.browser.safari) {
  rleft = rleft - 15;
 }
 if ($.browser.opera) {
  rleft = rleft + 15;
 }
 if ($.browser.msie && $.browser.version.indexOf("8") >= 0) {
  rleft = rleft - 20;
 }
 rightwin.mywin({left: "right", top: "bottom"}, function() {
  rightwin.hide();
 },{left: rleft, top: scrollTop + browserheight}).fadeOut(15000).dequeue();
 },500);

});

/**
 *@param position表示窗口的最終位置,包含兩個屬性，一個是left，一個是top
 *@param hidefunc表示執(zhí)行窗口隱藏的方法
 *@param initPos表示窗口初始位置，包含兩個屬性，一個是left，一個是top
 */
$.fn.mywin = function(position, hidefunc, initPos) {
 if (position && position instanceof Object) {
 var positionleft = position.left;
 var positiontop = position.top;

 var left;
 var top;
 var windowobj = $(window);
 var currentwin = this;
 var cwinwidth;
 var cwinheight;

 var browserwidth;
 var browserheight;
 var scrollLeft;
 var scrollTop;
 //計算瀏覽器當前可視區(qū)域的寬和高，以及滾動條左邊界，上邊界的值
 function getBrowserDim() {
  browserwidth = windowobj.width();
  browserheight = windowobj.height();
  scrollLeft = windowobj.scrollLeft();
  scrollTop = windowobj.scrollTop(); 
 } 
 //計算窗口真實的左邊界值
 function calLeft(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;
   if ($.browser.safari) {
   left = left - 15;
   }
   if ($.browser.opera) {
   left = left + 15;
   }
   if ($.browser.msie && $.browser.version.indexOf("8") >= 0) {
   left = left - 20;
   }
  } else {
   left = scrollLeft + (browserwidth - cwinwidth) / 2; 
  }
  } else if (positionleft && typeof positionleft == "number") {
  left = positionleft;
  } else {
  left = 0;
  }
 }
 //計算窗口真實的上邊界值 
 function calTop(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;
   if ($.browser.opera) {
   top = top - 25;
   }
  } else {
   top = scrollTop + (browserheight - cwinheight) / 2;
  }
  } else if (positiontop && typeof positiontop == "number") {
  top = positiontop;
  } else {
  top = 0;
  }
 }
 //移動窗口的位置
 function moveWin() {
  calLeft(currentwin.data("positionleft"), scrollLeft, browserwidth, cwinwidth);
  calTop(currentwin.data("positiontop"), scrollTop, browserheight, cwinheight);
  currentwin.animate({
  left: left,
  top: top
  },600); 
 }

 //定義關閉按鈕的動作
 currentwin.children(".title").children("img").click(function() {
  if (!hidefunc) {
  currentwin.hide("slow") ;
  } else {
  hidefunc();
  }
 });

 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);
 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(); 
 });
 //返回當前對象，以便可以級聯(lián)的執(zhí)行其他方法
 return currentwin;
 }
}

左下角和中間窗口的div是靠觸發(fā)click事件來顯示窗口，在滾動條滾動時觸發(fā)scroll事件來重新調用計算div的top和left的函數(shù)。右下角的窗口是徐徐升起的窗口，所以在文檔加載完成的時候就顯示窗口，處理的代碼是放在setTimeout()事件里面，setTimeout函數(shù)里面的fadeOut讓窗口達到漸變透明的效果。

案例代碼托管地址：https://github.com/shizongger/JqueryInAction

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站標題：jQuery實現(xiàn)優(yōu)雅的彈窗效果（6）
URL地址：http://bm7419.com/article4/jjsdie.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、響應式網(wǎng)站、外貿(mào)網(wǎng)站建設、企業(yè)網(wǎng)站制作、域名注冊、虛擬主機

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容