如何制作浮动广告 JavaScript制作浮动广告代码

  如果有一定的JavaScript基础,制作浮动广告还是比较容易的。直接上代码了:

  

复制代码 代码如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>无标题文档</title>

  <style type="text/css">

  *{

  margin:0;

  padding:0;

  }

  #csdn

  {

  width:800px;

  margin:0 auto;

  }

  #ad

  {

  position:absolute;

  right:0px;

  top:30px;

  z-index:1;

  }

  #cl

  {

  position:absolute;

  right:0px;

  top:30px;

  z-index:2;

  }

  </style>

  <script type="text/javascript">

  var advInitTop=30;

  var closeInitTop=30;

  function inix()

  {

  advInitTop=document.getElementById("ad").style.pixelTop;

  closeInitTop=document.getElementById("cl").style.pixelTop;

  }

  function closeAd()

  {

  document.getElementById("ad").style.display="none";

  document.getElementById("cl").style.display="none";

  }

  function move()

  {

  //document.getElementById("ad").style.pixelTop=document.body.scrollTop+advInitTop;

  //document.getElementById("cl").style.pixelTop=document.body.scrollTop+closeInitTop;

  document.getElementById("ad").style.pixelTop=document.documentElement.scrollTop+advInitTop;

  document.getElementById("cl").style.pixelTop=document.documentElement.scrollTop+closeInitTop;

  //alert(document.getElementById("ad").style.pixelTop);

  window.status=document.documentElement.scrollTop+"/"+document.getElementById("ad").style.pixelTop;

  }

  window.onscroll=move;

  </script>

  </head>

  <body>

  <div id="cl" onclick="closeAd()">

  <img src="images/close.jpg" />

  </div>

  <div id="csdn">

  <a href="http://www.csdn.net"><img src="images/xiaojie1.jpg" border="0" /></a>

  </div>

  <div id="ad">

  <a href="http://www.taobao.com"><img src="images/advpic.gif" /></a>

  </div>

  </body>

  </html>

  要点

  上述代码中要用document.documentElement ,不要用老的document.body,否则,不符合w3c标准,看不到浮动效果!