如何制作浮动广告
日 期：2006-10-22 来 源： 阅 读:
漫游于网络之间，你会发觉，因特网不但是信息的海洋，也是广告的海洋。除了普通的Gif Banner、Flash外，浮动广告也是时下网上较为流行的广告形式之一。当你拖动浏览器的滚动条时，这种在页面上浮动的广告，可以跟随屏幕一起移动。尽管这种效果对于广告展示有相当的实用价值，但对浏览你网页的人来讲，这则是个既妨碍阅读，又影响阅读兴趣的东西，因此一定不能滥用。不过，如果你能善用的话，它就能发挥出极大的作用。
要做出浮动式广告的效果并不困难，如果你有JS基础的可以自己写一个，如果连写都懒得写的话，到网上下载一个特效工具，按提示粘贴一下代码就OK。不过，想要真正了解它是怎样做出来的，则需要掌握一些JS知识了。这里向大家介绍一下简单的浮动广告做法。
以下这段代码可放在 < body > < /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 >
< !--下面为一个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="http://www.5dmedia.com/bbs" > < img src="http://www.3lian.com/edu/Files/newspic/2/059206092448727.gif" border="0" height="60" width="60" > < /a >
< /div >
在这里，你可以设置x、y的值来设定所固定层的位置，改变setTimeout("MoveLayer('AdLayer');", 20)中20的值为你希望调用MoveLayer()的时间间隔。还有要注意的是，使用的图片最好为透明背景的gif图，以使图片的背景颜色不至于遮住后面的的内容。
切记，要慎用浮动式广告，考虑使用特效的同时，千万要考虑到浏览者的感觉，不能滥用哦！
上一篇：让弹出窗口变得“体贴”一些 下一篇：使主页呈现“飞舞”特效
要做出浮动式广告的效果并不困难，如果你有JS基础的可以自己写一个，如果连写都懒得写的话，到网上下载一个特效工具，按提示粘贴一下代码就OK。不过，想要真正了解它是怎样做出来的，则需要掌握一些JS知识了。这里向大家介绍一下简单的浮动广告做法。
以下这段代码可放在 < body > < /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 >
< !--下面为一个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="http://www.5dmedia.com/bbs" > < img src="http://www.3lian.com/edu/Files/newspic/2/059206092448727.gif" border="0" height="60" width="60" > < /a >
< /div >
在这里，你可以设置x、y的值来设定所固定层的位置，改变setTimeout("MoveLayer('AdLayer');", 20)中20的值为你希望调用MoveLayer()的时间间隔。还有要注意的是，使用的图片最好为透明背景的gif图，以使图片的背景颜色不至于遮住后面的的内容。
切记，要慎用浮动式广告，考虑使用特效的同时，千万要考虑到浏览者的感觉，不能滥用哦！
- 让弹出窗口变得“体贴”一些
2006-10-22 00:00:00
让弹出窗口变得体贴一些 在网上冲浪时进入一些网站会出现弹出窗口。它可能是站长对你的亲切问候，也可能是网站的重要通告、网站广告之类的。但用得不好会让人产生厌烦心理...[阅读全文] - 使主页呈现“飞舞”特效
2006-10-22 00:00:00
朋友，“天上掉陷饼”都听说过吧？呵呵，陷饼它算个么，今天教你一个天上掉￥的招儿，并且～～哗啦啦地掉！哈～哈～哈，来吧^_* 首先看效果 将下面的JavaScript代码加到 he...[阅读全文] - 用javascript实现变色背景和文字(2)
2006-10-22 00:00:00
2、前景文字： html head title bgcolor /title meta http-equiv="Content-Type" content="text/html; charset=gb2312" script language="JavaScript" !-- //you can assig...[阅读全文] - 用javascript实现浏览器地震效果
2006-10-22 00:00:00
一种把人吓一跳的感觉。实现方法是，把下面的JavaScript代码加入到 body与 /body之间： script language="JavaScript" function surfto(form) { var myindex=form.select1....[阅读全文] - 初学javascript之cookie篇(1)
2006-10-22 00:00:00
简介 ==================================== 问题是我想解决自动访问http://www.thehungersite.com。这个页面能够限制你每一天只访问它一次（不要忘记在这链接上点击）。 ...[阅读全文] - 图片下拉选择器的制作(1)
2006-10-22 00:00:00
相信大家都见过一些软件里的图片下拉选择控件吧？喏，OICQ中就有。但网页上的你见过没有？小阳今天就为你推出你心怡已久的这个控件，下面演示中就是了！效果还可以吧？心动...[阅读全文] - HTC——浏览器上的舞者
2006-10-22 00:00:00
很久以来一直为页面工作的繁琐和杂乱而苦恼，做B/S很多时候痛苦就在做表现层这一块，业务逻辑和数据层的处理反而轻松不少。为什么？因为不能复用，大量的CSS和Javascript和...[阅读全文] - 图片下拉选择器的制作(2)
2006-10-22 00:00:00
第三 ，图片下拉列表框的滚动，要保证自动滚动到相应的图片出现在列表框的顶端：当手动滚动停止时，如果滚动条趋势是向下滚动，则自动继续向下滚动直至最近的图片在列表框...[阅读全文] - 用javascript实现文件夹轻松加密
2006-10-22 00:00:00
电脑里经常会存储着重要文件，这些文件需要进行加密，有许多方法来实现。但如果想对一个文件夹里的所有文件都进行加密，数量少还可以，要是数量多岂不是得把人累死？ 因此...[阅读全文] - JS脚本控制的广告-对联（没有关闭）
2006-04-12 00:00:00
function initEcAd() { document.all.AdLayer1.style.posTop = -200; document.all.AdLayer1.style.visibility = 'visible' document.all.AdLayer2.style.posTop = -200; d...[阅读全文] - 用javascript实现浏览器地震效果
2006-10-22 00:00:00
一种把人吓一跳的感觉。实现方法是，把下面的JavaScript代码加入到 body与 /body之间： script language="JavaScript" function surfto(form) { var myindex=form.select1....[阅读全文] - 用JavaScript保护页面
2006-04-13 00:00:00
//不允许页面单独打开 if (window.top.location==window.location){ window.top.location="指定的地址"; } //不允许页面嵌在框架里 if (window.top.location!=window.locat...[阅读全文] - 图片控制的渐变色文字(2)
2006-10-22 00:00:00
演示中小阳用了以下这幅图片： 这是很简单的动画，只是元件位置的移动而已，自己做一个也不难吧。下面介绍实现的代码： !-- 第一步，设置背景图片。我们把它的尺寸设到最小...[阅读全文] - 轻松搞定网页的【简繁转换】
2006-04-13 00:00:00
对网页进行简繁字体转换的方法一般有两种：一是使用《简繁通》这样的专业软件，另外一种是制作两套版本的网页。显然，这两种方法都较为麻烦，而且专业软件一般不能用于...[阅读全文] - javascript实例教程(21-11)
2006-10-22 00:00:00
使用JavaScript中的OLE Automation 7. 怎样处理集对象 Automation对象与其它的Jscript对象有些有相同的结构。它暴露了多种方法和属性，我们可以对它们进行处理。如果你从来...[阅读全文] - 特效代码收集
2006-04-13 00:00:00
滚动条 CODE:[url=###][Copy to clipboard][/url] 1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条） overflow-x水平方向内容溢出时的设置 overflow-y垂直方向...[阅读全文] - javascript实例教程(21-10)
2006-10-22 00:00:00
使用JavaScript中的OLE Automation 6. 怎样提高脚本程序的性能 自从我们处理重的对象模型（比如Word.Application）和应用程序实例，注意系统的资源示相当重要的。一旦我们...[阅读全文] - ie里window的method列表
2006-04-13 00:00:00
alert(sMsg) //弹出一个确认消息框 attachEvent(sEvent,pFunction) //绑定一个函数到某个事件，事件触发时随机执行其中一个被绑定的函数 blur() //令窗口丧失焦点 clearInt...[阅读全文] - javascript 小技巧(第二集)
2006-10-22 00:00:00
第二集 如何在页面内加入日期 我们要告诉你一个使用日期和时间的例子，是从你个人客户端机器获取日期和时间。 做法如下： ＜script language="LiveScript" ＜!-- Hiding to...[阅读全文] - 多级右键菜单
2006-04-13 00:00:00
HTMLHEADTITLE多级右键菜单 - 51windows.Net/TITLE META content="text/html; charset=gb2312" http-equiv=Content-Type STYLE type=text/cssBODY { FONT-SIZE: 12px; } .i...[阅读全文]
资讯中心精华推荐
- [博客运营] 各种漂亮的鼠标URL代码
- [搜索优化] 没有放之四海皆准的SEO技巧
- [搜索优化] 搜索引擎关键词排名优化知识完全手册
- [搜索优化] Title的写法
- [搜索优化] 百度封什么样的网站?兼谈初级SEO办法
- [搜索优化] Google排名的三大关键
- [JavaScript] ie里window的method列表
- [JavaScript] 让弹出窗口变得“体贴”一些
- [JavaScript] 点一下，首页地址添加到收藏夹
- [系统DIY] Windows操作系统十三例安装技巧
- [系统DIY] 实现Win98、WinNt、Win2000互相访问Fat32 N
- [系统DIY] Windows 罕见技巧全集大放送
- [系统DIY] 重装Windows后LILO被覆盖的解决办法
