专注于互联网--专注于架构

最新标签
网站地图
文章索引
Rss订阅

首页 »Dreamweaver » dreamweaver制作:Dreamweaver如何制作浮动广告 »正文

dreamweaver制作:Dreamweaver如何制作浮动广告

来源: 发布时间:星期四, 2009年2月12日 浏览:76次 评论:0


漫游于网络的间你会发觉因特网不但是信息海洋也是广告海洋除了普通G 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 df = (document.body.scrollTop + y - document.all.AdLayer.style.posTop)*.40;
var y = document.body.scrollTop + y - df;
eval(\"document.all.\" + layerName + \".style.posTop = y\");
eval(\"document.all.\" + layerName + \".style.posLeft = x\");//移动广告层
Timeout(\"MoveLayer(\'AdLayer\');\", 20);//设置20毫秒后再MoveLayer
}
//-->
</script>
<!--下面为个ID为AdLayer层(如ID名不为AdLayer上面MoveLayerAdLayer也要作相应修改)包括张带链接图片-->
<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://127.0.0.1/Files/BeyondPic/2007-4/19/0741913395547732.g\" border=\"0\" height=\"60\" width=\"60\"></a>
</div>

  在这里你可以设置x、y值来设定所固定层位置改变Timeout(\"MoveLayer(\'AdLayer\');\", 20)中20值为你希望MoveLayer时间间隔还有要注意使用图片最好为透明背景g以使图片背景颜色不至于遮住后面内容

  切记要慎用浮动式广告考虑使用特效同时千万要考虑到浏览者感觉不能滥用哦!


0

相关文章

读者评论

发表评论

  • 昵称:
  • 内容: