如何制作浮动广告

漫游于网络之间，你会发觉，因特网不但是信息的海洋，也是广告的海洋。除了普通的Gif Banner、Flash外，浮动广告也是时下网上较为流行的广告形式之一。当你拖动浏览器的滚动条时，这种在页面上浮动的广告，可以跟随屏幕一起移动。尽管这种效果对于广告展示有相当的实用价值，但对浏览你网页的人来讲，这则是个既妨碍阅读，又影响阅读兴趣的东西，因此一定不能滥用。不过，如果你能善用的话，它就能发挥出极大的作用。
) g. S! j5 P  ]6 b' w. D& v: D( l  v  s4 Q
　　要做出浮动式广告的效果并不困难，如果你有JS基础的可以自己写一个，如果连写都懒得写的话，到网上下载一个特效工具，按提示粘贴一下代码就OK。不过，想要真正了解它是怎样做出来的，则需要掌握一些JS知识了。这里向大家介绍一下简单的浮动广告做法。6 A% [1 M% [, j
# I1 m( T3 _" k5 S
　　以下这段代码可放在  body   /body 之间，其间我加入了一些注释（即“//”后的文字及“  !—”“-- ”之间的文字）。8 f. l" h( y  u2 m* r3 E, G

8 e4 H. I/ i5 O8 X$ c SCRIPT FOR=window EVENT=onload LANGUAGE="JScript" ' c% {0 n- B/ ]
initAd();//载入页面后，调用函数initAd()
3 q, m$ e+ Z# e& `' C& L /SCRIPT
" t. t" ^' w4 U0 \6 ^ script language="JScript"
7 y+ o7 ~3 S2 i5 ]  L* W  p !--
# C9 l% f% h% @function initAd() {* \/ z8 S- C/ Y) _) |# o
document.all.AdLayer.style.posTop = -200;//设置onLoad事件激发以后，广告层相对于固定后的y方向位置! S8 q& |! h1 Y' A& }- S
document.all.AdLayer.style.visibility = 'visible'//设置层为可见
/ h' |, U  _5 z! o1 b0 N1 hMoveLayer('AdLayer');//调用函数MoveLayer()6 o0 u  z% _2 H* A" V" g8 @
}
9 k. `. f4 @4 S# g* Z/ o) w. \) |3 nfunction MoveLayer(layerName) {
6 u4 t' V/ I( s3 y, |0 @var x = 600;//浮动广告层固定于浏览器的x方向位置8 N; O7 E5 K) J/ o+ w
var y = 300;//浮动广告层固定于浏览器的y方向位置1 b9 y6 r1 T1 e. W1 M9 d
var diff = (document.body.scrollTop   y - document.all.AdLayer.style.posTop)*.40;
7 B. u9 U' O4 K( t. b* h2 k3 P5 Tvar y = document.body.scrollTop   y - diff;/ _! R2 v  G. r
eval("document.all."   layerName   ".style.posTop = y");
" S3 x' \7 a" P' seval("document.all."   layerName   ".style.posLeft = x");//移动广告层1 T! a1 A0 H6 \; a
setTimeout("MoveLayer('AdLayer');", 20);//设置20毫秒后再调用函数MoveLayer()
) i6 Y2 {" v, s* O9 r}+ t7 S( Q  S0 \6 \
//--
. ?! H/ U( P+ [1 {! c3 U, m /script
) t) W( E( g; `: n
4 e2 E$ G; G5 T  g1 X" E  I. Z !--下面为一个ID为AdLayer的层（如ID名不为AdLayer，上面MoveLayer()内的AdLayer也要作相应修改），包括一张带链接的图片--
' c# X0 ~8 h! p% b% l  z div id=AdLayer style='position:absolute; width:61px; height:59px; z-index:20; visibility:hidden;; left: 600px; top: 300px'  
7 R$ ~  h0 d$ t7 P" \ a href="http://www.5dmedia.com/bbs"   img src='../qqkk2000.gif' border="0" height="60" width="60"   /a  # ]8 j$ ?6 I- g) u
/div
3 w7 r8 H7 q8 s
) V* F* u% m5 E　　在这里，你可以设置x、y的值来设定所固定层的位置，改变setTimeout("MoveLayer('AdLayer');", 20)中20的值为你希望调用MoveLayer()的时间间隔。还有要注意的是，使用的图片最好为透明背景的gif图，以使图片的背景颜色不至于遮住后面的的内容。+ `; E$ k9 {9 A& K) m
　　切记，要慎用浮动式广告，考虑使用特效的同时，千万要考虑到浏览者的感觉，不能滥用哦！