廣告是現代網頁設計中不可或缺的內容。廣告可以有很多種形式，但最終目的都是要吸引觀眾的注意力。盡管廣告少不了畫面、音效和廣告語等效果，但其實現主要還是應用JavaScript 代碼，只要很好掌握了JavaScript程序設計，剩下的就是創意和美工了。本章介紹幾種廣告效果，包括對聯廣告、飄動廣告、滾動廣告和特殊視覺效果的廣告，相信讀者會從中受到啟發。
位置固定的對聯廣告
本節給出一個位置固定的對聯廣告，廣告圖片總是停留在頁面的固定位置，不隨頁面的滾動而改變。
要點
本節代碼主要使用了Style對象的visibility 屬性和網頁元素坐標位置及尺寸等應用，主要功能和用法如下。
- 在網頁樣式表(CSS)中，除了可以通過 z-index 控制重疊元素對象之間的顯示與隱藏關系外，還可以通過 display 屬性和 visibility 屬性控制元素對象內容的顯示與隱藏。
- display 屬性和 visibility 屬性的用法和效果比較相似:如果設置元素的 display 屬性值為block，或設置 visibility 屬性值為 visible，都可以顯示元素對象內容;反之，設置元素的display 屬性值為 none，或者設置 visibility 屬性值為 hidden，都將隱藏元素對象內容。
- 當使用 display 屬性隱藏元素對象時，被隱藏的元素對象將不占位置，其他元素緊接著順序顯示。
- 而使用 visibility 屬性隱藏元素對象時，只是隱藏了當前元素對象的內容，但仍在原位置保留其所占區域。
- 網頁中元素對象的坐標位置和尺寸，可以通過網頁樣式表的方法或者 DOM方法得到在網頁樣式表中，定位網頁元素對象使用left、top、right、bottom 屬性，設置寬度和高度使用 width 和 height屬性,這些網頁樣式屬性在 JavaScript 中使用“網頁元素對象,style.網頁樣式屬性名”格式進行引用。通過這種方法可方便設置網頁元素對象的位置及尺寸，但是只有在網頁樣式表中定義了上述屬性時，JavaScript 才可對其進行引用。
- DOM 提供了各種類型的元素對象定位及尺寸屬性，這些屬性基本上只用于讀取，而不可進行設置，使用時的語法規則是“網頁元素對象.DOM 屬性名”。其中，屬性名中包含“client”的寬度和高度表示真正能夠顯示網頁內容的區域:屬性名中包含“ofset”的寬度和高度表示包括了元素對象邊線在內的所有區域;屬性名中包含“scroll”的寬度和高度表示包含所有全部網頁內容的區域。
<script language="JavaScript">
function initEcAd()
{
document.all.AdLayer1.style.posTop = -200;
document.all.AdLayer1.style.visibility = 'visible'
document.all.AdLayer2.style.posTop = -200;
document.all.AdLayer2.style.visibility = 'visible'
MoveLeftLayer('AdLayer1');
MoveRightLayer('AdLayer2');
}
function MoveLeftLayer(layerName)
{
var x = 5;
var y = 100;// 左側廣告距離頁首高度
var diff = (document.body.scrollTop + y - document.all.AdLayer1.style.posTop)*.40;
var y = document.body.scrollTop + y - diff;
eval("document.all." + layerName + ".style.posTop = parseInt(y)");
eval("document.all." + layerName + ".style.posLeft = x");
setTimeout("MoveLeftLayer('AdLayer1');", 20);
}
function MoveRightLayer(layerName)
{
var x = 5;
var y = 100;// 右側廣告距離頁首高度
var diff = (document.body.scrollTop + y - document.all.AdLayer2.style.posTop)*.40;
var y = document.body.scrollTop + y - diff;
eval("document.all." + layerName + ".style.posTop = y");
eval("document.all." + layerName + ".style.posRight = x");
setTimeout("MoveRightLayer('AdLayer2');", 20);
}
document.write("<div id=AdLayer1 style='position: absolute;visibility:hidden;z-index:1'><a href='http://localhost' target='_blank'><img src=ad-01.gif border='0'></a></div>"
+"<div id=AdLayer2 style='position: absolute;visibility:hidden;z-index:1'><a href='http://localhost' target='_blank'><img src=ad-01.gif border='0'></a></div>");
initEcAd()
// JavaScript Document
</script>分析
- (1)程序使用一系列的 document.write()語句，分別輸出左側廣告內容、右側廣告內容并將二者分別裝入兩個名為AdLayer1和AdLayer2 的<div>中。
- (2)隨后，使用一個for 循環語句，在頁面中添加了15個2行的表格。這些表格不是必須的，其目的是比較拖動圖像時的顯示效果。
- (3)函數 initEcAd()的功能是設置兩個<div>的位置及其可見度。通過設置 AdLayerl 和AdLayer2 的style.posTop 和 style.visibility 實現。
- (4)函數 MoveLefLayer(layerName)和 MoveRightLayer(layerName)的功能是設置左側廣告和右側廣告的屬性。主要通過重新設置兩個<div>的style.posTop和posLeft(或 posRight)實現。
隨頁面滾動的對聯廣告
本節給出一段隨頁面滾動的對聯廣告示例代碼，運行該程序后，頁面兩側各出現一幅帶鏈接的圖片，拉動滾動條時，圖片會隨頁面一起滾動。
要點
本節代碼主要使用了 document.getElementById(id)方法、Math.ceil( )方法、Math.abs( )方法和網頁元素坐標位置及尺寸等應用，主要功能和用法如下。
- 在DOM中，可以對頁面元素進行訪問，甚至對其進行操作。對于文檔中的特定區域，如果已對其進行了惟一標識，則可以對該區域進行檢索。
- document.getElementById(元素標識)方法,返回 id 值為“元素標識”的對象的一個索引。
- document.getElementsByName(元素名稱)方法，返回name 值為“元素名稱”的所有XHTML 元素對象的列表。
- document.getElementsByTagName(標簽名稱)方法，返回別名為“標簽名稱”的所有XHTML 元素的列表。
- Math 對象用于進行屬性運算。其屬性是數學中一些常見的常數值。在 Math 對象的方法中，除了 randomO之外的所有方法都需要一個或幾個參數。典型的是三角函數在作為一個參數的值上進行操作，其他參數決定傳遞的參數中哪一個是最大值或最小值。
- Math.cei(n)方法用于求大于或等于n的整數，參數n指定要進行運算的數值。與其對應的方法是 Math.floor(n)。
- Math.abs(n)方法用于求一個數值的絕對值，參數n指定要進行運算的數值。
<script language="JavaScript">
<!--
var delta=0.8;
var collection;
var closeB=false;
function floaters()
{
this.items= [];
this.addItem= function(id,x,y,content)
{ //向頁面寫入一個<div>
document.write('<DIV id='+id);
document.write(' style="Z-INDEX: 10; POSITION: absolute;width:80px; height:60px;');
document.write('left:'+(typeof(x)=='string'?eval(x):x));
document.write(';top:'+(typeof(y)=='string'?eval(y):y)+'">');
document.write(content+'</DIV>');var newItem= {};
//獲取元素屬性
newItem.object= document.getElementById(id);
newIt
：綜合指南)
