如何制作浮动广告

今天是：

首页 ┆ 信息查询 ┆ 网站SEO查询工具 ┆ CSS编辑器 ┆ 建站素材

软件新闻

操作系统

Vista Winxp Win2003 Linux Windows综合

工具软件

系统工具媒体工具网络工具杀毒软件聊天

软件开发

C教程 C++ Java C# ASP.NET JSP PHP

数据库

Oracle MySQL DB2 SQL Server Sybase

安全

网络病毒

办公应用

Word Excel Powerpoint Outlook 其他

平面设计

Photoshop Fireworks Coreldraw Flash Illustrator 3dsmax

网站运营

网站运营网站优化网站策划策划书下载建站心得站长故事网站盈利网页制作网页特效 建站素材 免费资源 QQ频道

当前位置：首页 >> 网页制作 >> Javascript/Ajax >> 如何制作浮动广告

发布于2005-07-08 06:08 来源：网海拾贝

　　漫游于网络之间，你会发觉，因特网不但是信息的海洋，也是广告的海洋。除了普通的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='../qqkk2000.gif' border="0" height="60" width="60" > < /a >
< /div >

　　在这里，你可以设置x、y的值来设定所固定层的位置，改变setTimeout("MoveLayer('AdLayer');", 20)中20的值为你希望调用MoveLayer()的时间间隔。还有要注意的是，使用的图片最好为透明背景的gif图，以使图片的背景颜色不至于遮住后面的的内容。
　　切记，要慎用浮动式广告，考虑使用特效的同时，千万要考虑到浏览者的感觉，不能滥用哦！

中查找“如何制作浮动广告”更多相关内容

中查找“如何制作浮动广告”更多相关内容

上一篇：让弹出窗口变得“体贴”一些(javascript)
下一篇：使主页呈现“飞舞”特效

最近更新

赞助商

·javascript实现图片放大镜效果	12-30
·图片代替提交和重置按钮	12-11
·JavaScript教程:图片切割效果	12-10
·JavaScript动态加载CSS的三种方法	12-02
·JavaScript语言中的Literal Syntax特性	12-02
·JavaScript模仿Apache的ObjectPool	12-02
·关于JavaScript的执行域,标识符解析,闭包..	12-02
·Javascript教程:拖拽效果研究	12-01
·浏览器对Cookie的限制	11-10
·JavaScript中的排序函数sort	10-28
·初学Javascript的总结	10-24