| 首页 | 视觉资讯 | 平面视觉 | 环艺设计 | CG视觉 | 设计教程 | 人物 |
视觉资讯
设计资讯 网络媒体 设计征集 书刊
平面视觉
画册 包装 VI 招贴 标志 创意 文案 理论
环艺设计
建筑设计 室内设计 景观设计 家装设计
CG视觉
插画 3D视觉 动漫
设计教程
平面教程 网页教程 多媒体教程
人物
设计师 设计公司 人物访谈
您现在的位置: 第一视觉 >> 设计教程 >> 网页教程 >> Javascript教程 >> 正文
浮动广告的制作
作者:佚名 | 文章来源:第一视觉 | 时间:2006-11-12 【字体:
 漫游于网络之间,你会发觉,因特网不但是信息的海洋,也是广告的海洋。除了普通的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图,以使图片的背景颜色不至于遮住后面的的内容。
  切记,要慎用浮动式广告,考虑使用特效的同时,千万要考虑到浏览者的感觉,不能滥用哦!
  • 上一篇文章:

  • 下一篇文章:
  • 相关文章
    没有相关文章
    版权申明:
       转载请不要修改任何文字图片链接信息。如需使用本站作品,请与原作者联系,版权归原作者所有。
       第一视觉(www.vision1.cn)依法保护知识产权,如果我们的文章有涉及或侵犯您的有关权益,请联系我站编辑人员,注明网址及文章,我们会即时处理或删除!
    最新热门文章
    普通文章用javascript 将gb2312编码转utf-8编码
    普通文章JavaScript方法和技巧大全
    普通文章JavaScript的document和window对象详解
    普通文章脚本代码:实例解析Js+XML的操作方法
    关于我们 | 联系我们 | 版权声明 | 免责声明 | 网站地图
    版权所有 © 2006-2007 第一视觉(Vision1.cn)
    Copyright © 2006-2007 Vision1.cn All rights reserved