輕鬆使用jQuery置中廣告視窗

作者：顏怡宏
精誠資訊 恆逸教育訓練中心 資深講師
技術分類：多媒體
相信很多設計的朋友，都會想要將廣告的內容以視窗的方式來呈現，而之前使用開啟新視窗的方式，由於目前許多主流瀏覽器都可以設定成「禁止彈出式視窗」，而造成無法正確呈現內容，而逐漸改變成由一個Div區塊來呈現內容，但是對如何將一個廣告的區塊放置在畫面的正中央來吸引目光，卻是有些麻煩，更不用說是在使用者縮放視窗，或者是捲動內容之後，還能夠放置在畫面的中央，這種困難度就更高了。
而這種情形，卻可以藉由jQuery的便利功能，以短短幾行程式，依照下面的步驟，就能夠輕易解決。例如要插入此廣告區塊。

1.首先只要在<body>區塊中，將要成為中央談出視窗的<div>區塊加上id屬性，例如命名為
<div id="popWindow">

<body>
<div id="popWindow"></div>
</body>


2.接著在<style>區塊中設定這個<div>區塊的CSS外觀屬性

#popWindow{ /*此行指定放置廣告的div */
width:666px; /*此行設定div的寬度*/
height:488px; /*此行設定div的高度*/
background:url(popWindow.png) no-repeat; /*此行設定div的背景圖形*/
box-shadow:5px 5px 10px black; /*此行設定div的外框陰影*/
border:2px gray solid; /*此行設定div的外框線條*/
border-radius:20px; /*此行設定div的外框圓角*/
position:fixed; /*此行設定div為不隨捲動而移動的模式*/
}


3.然後先引入jQuery.js這個javascript檔案來使用，可以由jQuery官方網站下載。https://jquery.com/download/

<script type="text/javascript" src="jquery.js"></script>


4.最後於<script>標籤中再加入以下javascript程式碼就可以完成了。

<script type="text/javascript">
function centerHandler(){/*設定置中的函式*/
var scrollDist=$(window).scrollTop();/*取得捲動長度*/
var myTop=($(window).height()-$("#popWindow").height())/2+scrollDist;
/*取得垂直中央位置*/
var myLeft=($(window).width()-$("#popWindow").width())/2;
/*取得水平中央位置*/
$("#popWindow").offset({top:myTop,left:myLeft});
/*設定區塊於水平與垂直置中*/
}

centerHandler (); /*呼叫置中函式，使廣告區塊置中*/
$(window).scroll(centerHandler); /*當網頁捲動時呼叫置中函式*/
$(window).resize(centerHandler); /*當視窗縮放時呼叫置中函式*/
</script>


如此就能夠成功的插入廣告區塊到畫面的正中央了。

Share |

您可在下列課程中了解更多技巧喔！

相關學習資源

【jQuery】JavaScript與jQuery網頁互動實作
【jQueryUI】jQuery UI互動元件快速上手
【HTML5】HTML5與CSS3網站開發實務