JavaScript 动态网页实例 —— 广告效果

        广告是现代网页设计中不可或缺的内容。广告可以有很多种形式，但最终目的都是要吸引观众的注意力。尽管广告少不了画面、音效和广告语等效果，但其实现主要还是应用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