JavaScript实现网页浮动广告的简单方法

浮动广告概述与使用注意事项

在互联网浏览过程中，用户常会接触到多种广告形式，除了常见的Gif Banner和Flash外，浮动广告也是目前较为流行的一种展示方式。这种广告在用户拖动浏览器滚动条时，能够跟随屏幕移动，保持可见性。虽然这种效果对广告展示具有实用价值，但对于浏览者而言，它可能妨碍阅读并降低阅读兴趣，因此必须谨慎使用，避免过度干扰用户体验。

实现浮动广告效果并非难事。具备JavaScript基础的用户可以自行编写代码；若希望简化操作，也可在网上下载现成的特效工具，按照提示粘贴代码即可。然而，若要深入理解其实现原理，则需要掌握相关的JavaScript知识。本文将详细介绍一种简单的浮动广告实现方法。

以下代码片段应放置在HTML文档的<body>标签内部。代码中包含了详细的注释，即“//”符号后的文字以及“<!—”和“-->”之间的说明性文字，旨在帮助读者理解代码逻辑。

<SCRIPT FOR=window EVENT=onload LANGUAGE="JScript">
initAd();//载入页面后，调用函数initAd()
</SCRIPT>
<script language="JScript">
　　 <!--
function initAd() {
document.all.AdLayer.style.posTop = -200;//设置onLoad事件激发以后，广告层相对于固定后的y方向位置
document.all.AdLayer.style.visibility = visible//设置层为可见
MoveLayer(AdLayer);//调用函数MoveLayer()
　　 }
function MoveLayer(layerName) {
var x = 600;//浮动广告层固定于浏览器的x方向位置
var y = 300;//浮动广告层固定于浏览器的y方向位置
var diff = (document.body.scrollTop + y - document.all.AdLayer.style.posTop)*.40;
var y = document.body.scrollTop + y - diff;
eval("document.all." + layerName + ".style.posTop = y");
eval("document.all." + layerName + ".style.posLeft = x");//移动广告层
setTimeout("MoveLayer(AdLayer);", 20);//设置20毫秒后再调用函数MoveLayer()
　　 }
　　 //-->
</script>
HTML结构配置与参数调整<!--下面为一个ID为AdLayer的层（如ID名不为AdLayer，上面MoveLayer()内的AdLayer也要作相应修改），包括一张带链接的图片-->
<div id=AdLayer style=position:absolute; width:61px; height:59px; z-index:20; visibility:hidden;; left: 600px; top: 300px>
<a href="https://www.jb51.net"><img src=../qqkk2000.gif border="0" height="60" width="60"></a>
</div>

在上述代码中，用户可以通过调整x和y变量的值来设定广告层固定的位置。此外，可以通过修改setTimeout("MoveLayer(AdLayer);", 20)中第二个参数（原值为20）来调整调用MoveLayer()函数的时间间隔，从而控制动画的刷新频率。需要注意的是，使用的图片最好采用透明背景的GIF格式，以防止图片背景色遮挡页面后续内容。

务必谨慎使用浮动式广告。在考虑使用此类特效时，必须充分考量浏览者的感受，严禁滥用，以免引起用户反感。