网站首页  注册会员  本站免费电影 留言板  繁體中文

 

您现在的位置: 陈鹏个人网站 >> 电脑应用 >> 网络应用 >> 网页制作 >> 正文
 

   
专 题 栏 目
相 关 文 章

图解Firefox 3.1版的私密
FireFox 3.0的新书签程序
PPS网络电视(PPStream)
Mozilla FireFox 3.5.1中
Mozilla FireFox V3.5 正
DirectShow漏洞来了 Z武
百无一用的一些雷人Fire
eMule Xtreme V7.2 fina
Webware100 傲游浏览器再
系统优化和隐私保护工具

 
Dreamweaver如何制作浮动广告           
Dreamweaver如何制作浮动广告
作者:陈鹏 文章来源:eNet 点击数: 更新时间:2009-9-12 9:02:30
 




 

要做出浮动式广告的效果并不困难,如果你有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图,以使图片的背景颜色不至于遮住后面的的内容。

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

  




文章录入:陈鹏    责任编辑:陈鹏 
  • 上一篇文章:

  • 下一篇文章:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
     
     
     
     
     

    Copyright © 2007 - 2009 chenpeng123.com All Rights Reserved
    本站所有文章,软件等均来自网络收集,不代表本站观点,仅供学习和研究使用。如有侵犯您的版权,请联系我们,本站将立即删除。
    鲁ICP备07014697号
    你是本站第 位访客