<title>制作浮动的广告</title>
<script language="javascript" type="text/javascript">
var advInitTop=0;//使层总置于顶端的初始值
function move()
{
windowdocumentgetElementById("advLayer")styletop=advInitTop+windowdocumentbodyscrollTop; }
windowonscroll=move;//窗口的滚动事件,当页面滚动时调用move()函数 </script>
</head>
<body >
<div id="advLayer" style="position:absolute;left:16px;top:129px;width:180px;height:230px; z-index:1;">
<img src="images/btjpg" width="180" height="230"/>
</div>
</body>
除了普通的gifbanner、flash外，浮动广告也是时下网上较为流行的广告形式之一。当你拖动浏览器的滚动条时，这种在页面上浮动的广告，可以跟随屏幕一起移动。尽管这种效果对于广告展示有相当的实用价值，但对浏览你网页的人来讲，这则是个既妨碍阅读，又影响阅读兴趣的东西，因此一定不能滥用。不过，如果你能善用的话，它就能发挥出极大的作用。
要做出浮动式广告的效果并不困难，如果你有js基础的可以自己写一个，如果连写都懒得写的话，到网上下载一个特效工具，按提示粘贴一下代码就ok。不过，想要真正了解它是怎样做出来的，则需要掌握一些js知识了。这里向大家介绍一下简单的浮动广告做法。
以下这段代码可放在之间，其间我加入了一些注释（即“//”后的文字及“网页设计培训免费试听中！您还在等什么？！
functioninitEcAd(){document
all
AdLayer1
style
posTop=-200;document
all
AdLayer1
style
visibility='visible'document
all
AdLayer2
style
posTop=-200;document
all
AdLayer2
style
visibility='visible'MoveLeftLayer('AdLayer1');MoveRightLayer('AdLayer2');}functionMoveLeftLayer(layerName){varx=5;vary=165;vardiff=(document
body
scrollTop+y-document
all
AdLayer1
style
posTop)
40;vary=document
body
scrollTop+y-diff;eval("document
all
"+layerName+"
style
posTop=y");eval("document
all
"+layerName+"
style
posLeft=x");setTimeout("MoveLeftLayer('AdLayer1');",20);}functionMoveRightLayer(layerName){varx=5;vary=165;vardiff=(document
body
scrollTop+y-document
all
AdLayer2
style
posTop)
40;vary=document
body
scrollTop+y-diff;eval("document
all
"+layerName+"
style
posTop=y");eval("document
all
"+layerName+"
style
posRight=x");setTimeout("MoveRightLayer('AdLayer2');",20);}document
write("<divid=AdLayer1style='position:absolute;visibility:hidden;z-index:1'><ahref=连接地址target=_blank><imgsrc=地址border=0></a></div>"+"<divid=AdLayer2style='position:absolute;visibility:hidden;z-index:1'><ahref=连接地址target=_blank><imgsrc=地址border=0></a></div>");initEcAd()把上面的代码另存为一个
JS文件，然后在想实现此效果的页面<head></head>之间加上一列代码：<SCRIPTFOR='EccoolAd'EVENT='fscommand()'LANGUAGE='JavaScript'>AdLayer1
style
visibility='hidden';AdLayer2
style
visibility='hidden';</script><scriptsrc=
js></script>嘿嘿把分给我吧
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
{margin: 0;padding: 0;}
Ad{
position: fixed;
width: 140px;
height: 500px;
background: #db3e52 ;
top: -moz-calc(50% - 250px);
top: -webkit-calc(50% - 250px);
top: calc(50% - 250px);
}
divAd:nth-child(1){
left: 2%;
}
divAd:nth-child(2){
right:2%;
}
</style>
</head>
<body>
<div class="Ad"></div>
<div class="Ad"></div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）