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

更新時間：2017年02月08日 09:35:48 作者：少年張翠山

這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)優(yōu)雅彈窗效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

這里寫圖片描述

如圖，在瀏覽器的左上方是兩個button按鈕，按下之后分別彈出左下角的窗口和中間的窗口，右下角的窗口當(dāng)頁面加載完成之后自動慢慢顯示，之后又徐徐的淡出。基于div+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實(shí)戰(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="關(guān)閉" src="../image/close.gif" />
  我是左邊顯示窗口的標(biāo)題欄
 </div>
 <div class="content">
  我是左邊顯示窗口的內(nèi)容區(qū)
 </div>
 </div>
 <div class="window" id="center">
 <div class="title">
  <img alt="關(guān)閉" src="../image/close.gif" />
  我是中間顯示窗口的標(biāo)題欄
 </div>
 <div class="content">
  <p>我是中間顯示窗口的內(nèi)容區(qū)</p>
 </div>
 </div> 
 <div class="window" id="right">
 <div class="title">
  <img alt="關(guān)閉" src="../image/close.gif" />
  我是右邊顯示窗口的標(biāo)題欄
 </div>
 <div class="content">
  我是右邊顯示窗口的內(nèi)容區(qū)
 </div>
 </div>
</body>
</html>

從html代碼中可以看到，這里的窗口是用div來實(shí)現(xiàn)的，目前的html代碼只是描繪了頁面的基本骨架，能夠效果離窗口效果還相差甚遠(yuǎn)，不過別急，添加上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;
}

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

這里寫圖片描述

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

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

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

只需要在需要的地方注冊上本插件就行了。相應(yīng)的，這里我們編寫的插件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;
}

上訴代碼編寫了本應(yīng)用中中間窗口案例的插件，調(diào)用代碼如下：

window.js

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

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

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

$(document).ready(function(){
 var centerwin = $("#center");
 var leftwin = $("#left");
 var rightwin = $("#right");
 $("#centerpop").click(function(){
 //鼠標(biāo)點(diǎn)擊按鈕之后，把id為center的窗口顯示在頁面中間
 //計算位于屏幕中間的窗口的左邊界和上邊界的值
 //瀏覽器可視區(qū)域的寬和高，當(dāng)前窗口的寬和高
 //需要考慮到橫向滾動條的當(dāng)前左邊界值以及縱向滾動條的當(dāng)前上邊界值
 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;
 //計算瀏覽器當(dāng)前可視區(qū)域的寬和高，以及滾動條左邊界，上邊界的值
 function getBrowserDim() {
  browserwidth = windowobj.width();
  browserheight = windowobj.height();
  scrollLeft = windowobj.scrollLeft();
  scrollTop = windowobj.scrollTop(); 
 } 
 //計算窗口真實(shí)的左邊界值
 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;
  }
 }
 //計算窗口真實(shí)的上邊界值 
 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); 
 }

 //定義關(guān)閉按鈕的動作
 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(){
  //判斷一下當(dāng)前窗口是否可見
  if (!currentwin.is(":visible")) {
  return; 
  }
  clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(function(){
  getBrowserDim(); 
  moveWin();
  },300);
 });
 //瀏覽器大小改變時，移動窗口的位置
 $(window).resize(function(){
  //判斷一下當(dāng)前窗口是否可見
  if (!currentwin.is(":visible")) {
  return; 
  }
  getBrowserDim(); 
  moveWin(); 
 });
 //返回當(dāng)前對象，以便可以級聯(lián)的執(zhí)行其他方法
 return currentwin;
 }
}

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: