JQuery實戰---視窗效果，jquery實戰視窗
在前面的相關博文中，小編對jquery的相關知識進行了簡單的總結，關於jquery的很多小的知識點，都需要我們自己去動手和實踐，一行行代碼都需要我們自己親自動手去敲，今天我們繼續來學習jquery的相關小例子，今天我們這個小例子是關於視窗的彈出效果，相關源碼，小編已經上傳，有需要的小夥伴可以點擊進行下載哦，希望可以協助到有需要的小夥伴哦，接著，我們就開始小例子的學習，首先，我們來看一下最終的，如下所示：
這個視窗效果的小例子，既不會被攔窗而且更加的靈活， 接著，我們來看一下這個小例子的整體目錄的布局，如所示：
接下來，我們開始來編寫我們的程式碼，一步一步編寫執行個體，首先第一步，建立html檔案，代碼編寫如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>JQuery實戰-視窗效果</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link type="text/css" rel="stylesheet" href="css/window.css" /><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/window.js"></script></head><body><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <input type="button" value="左下角顯示視窗" id="leftpop" /><input type="button" value="螢幕中間顯示視窗" id="centerpop" /><div class="window" id="center"><div class="title"><img alt="關閉" src="images/close.gif" />我是中間顯示視窗的標題列</div><div class="content"><p>我是中間顯示視窗的內容區</p><p>我是中間顯示視窗的內容區</p><p>我是中間顯示視窗的內容區</p><p>我是中間顯示視窗的內容區</p><p>我是中間顯示視窗的內容區</p><p>我是中間顯示視窗的內容區</p><p>我是中間顯示視窗的內容區</p><p>我是中間顯示視窗的內容區</p><p>我是中間顯示視窗的內容區</p><p>我是中間顯示視窗的內容區</p><p>我是中間顯示視窗的內容區</p><p>我是中間顯示視窗的內容區</p><p>我是中間顯示視窗的內容區</p><p>我是中間顯示視窗的內容區</p><p>我是中間顯示視窗的內容區</p><p>我是中間顯示視窗的內容區</p><p>我是中間顯示視窗的內容區</p><p>我是中間顯示視窗的內容區</p><p>我是中間顯示視窗的內容區</p><p>我是中間顯示視窗的內容區</p><p>我是中間顯示視窗的內容區</p></div></div><div class="window" id="left"><div class="title"><img alt="關閉" src="images/close.gif" />我是左邊顯示視窗的標題列</div><div class="content">我是左邊顯示視窗的內容區</div></div><div class="window" id="right"><div class="title"><img alt="關閉" src="images/close.gif" />我是右邊顯示視窗的標題列</div><div class="content">我是右邊顯示視窗的內容區</div></div></body></html>我們來分析一下上面的代碼，頁面中類比的視窗可以通過html的div標籤來實現，視窗中的標題列和內容地區可以再分別用一個div來表示，讓一組div看起來是視窗的樣式，有很多種方法，比如可以設定整個視窗使用一種背景色，然後內容地區使用另一種背景色，並且給視窗設定一定的padding值，已達到內容地區和標題列以後視窗外邊的對比，從而看起來是一個視窗的效果。到此html就可以功成身退了，因為頁面上只有這些內容，至於如何展現一個標籤頁的效果，是css的工作，接著，我們來編寫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;/*控制地區內容超過指定高度和寬度時顯示捲軸*/ overflow: auto;}.title { padding: 4px; font-size: 14px;}.title img { width: 14px; height: 14px; float: right; cursor: pointer;} 我們來看一下float，實際上會影響到後面的一個元素和float的元素之間的顯示效果，因此這個例子中如果html代碼中img位於標題列的最後時，float：right導致圖片跑到了內容地區的最右邊，只有在html裡面講img放到標題列文字的前面，這個時候float：right才會使圖片剛好位於標題列的最右邊。相應的，在js中我們也要建立兩個檔案，一個jquery一個window，鑒於jquery的代碼較多，所以小編已經上傳相關資源，有需要的小夥伴可以到該連結下載，接著，我們來編寫tab的代碼，來給整理頁面添加行為能力，代碼如下所示：
$(document).ready(function(){//1.點擊按鈕可以在螢幕中間顯示一個視窗//2.點擊按鈕2可以在螢幕的左下角顯示一個視窗//3.頁面裝載完成後，可以在螢幕右下角飄上一個視窗，並且視窗慢慢淡出 /* *$(".title img").click(function(){ * //關閉按鈕點擊之後，關閉視窗 * $(this).parent().parent().hide("slow"); *}); */var centerwin = $("#center");var leftwin = $("#left");var rightwin = $("#right");$("#centerpop").click(function(){//滑鼠點擊按鈕之後，把id為center的視窗顯示在頁面中間//計算位於螢幕中間的視窗的左邊界和上邊界的值//瀏覽器可視地區的寬和高，當前視窗的寬和高//需要考慮到橫向捲軸的當前左邊界值以及縱向捲軸的當前上邊界值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();varscrollLeft = windowobj.scrollLeft();varscrollTop = 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);});/* *$.fn.hello = function() { * alert("hello:" + this.val()); * return this; *} *//** *@param position表示視窗的最終位置,包含兩個屬性，一個是left，一個是top *@param hidefunc表示執行視窗隱藏的方法 *@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;//計算瀏覽器當前可視地區的寬和高，以及捲軸左邊界，上邊界的值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();});//返回當前對象，以便可以級聯的執行其他方法return currentwin;}} 至此呢，我們視窗效果的這個小執行個體代碼就已經編寫完畢了，我們來看一下我們的運行效果如所示：
小編寄語：至此jquery的小例子到此就要和小夥伴們說再見了，還是博文開篇的那句話，所有的實戰小例子都需要我們自己親自動手去敲，一行一行的代碼需要在實踐的過程中慢慢領悟，來公司實習快三周的時間了，深刻認識到寫文檔和畫圖的重要性，客戶是挑剔的，一個標點符號的使用，字型的使用使用，語言語義的表達能力，所有的一起小編都需要在實習過程中慢慢的提高，最後，祝各位小夥伴端午節快樂`(*∩_∩*)′！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
