首页 > 代码库 > 制作浮动广告(注意:会出现闪屏效果)

制作浮动广告(注意:会出现闪屏效果)

<script language="javascript" type="text/javascript">
 var initTop;
 //获取广告div初始的top值 
 function getInitTop(){
  initTop = document.getElementById("floatDiv").style.pixelTop;
 }
 //设置广告的位置
 function setTop(){
  /*
  注意:文档中如果有DOCTYPE文档标签,那么document.body.scrollTop得到的值永远为0,而document.documentElement.scrollTop就能得到实际,如果没有DOCTYPE文档标签,那么结果就相反
  */
  var height = document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop;//获取滚动条滚动的高(使用三元运算符解决了DOCTYPE文档标签产生的影响)
  document.getElementById("floatDiv").style.pixelTop = initTop+height;//设置广告的pixelTop的值(新值=广告的初始pixelTop值+滚动条滚动的高度)
 }
 window.onscroll=setTop;//浏览器滚动条滚动时调用setTop函数
 
 //隐藏广告
 function closeDiv(){
  document.getElementById("floatDiv").style.display="none";//block显示  none隐藏 
 }
</script>

<body  onl oad="getInitTop()">
 <div id="floatDiv" style="width:80px;height:72px; position:absolute; top:100px">
     <img src="http://www.mamicode.com/image/float.gif"/><br />
     <input type="button" value="http://www.mamicode.com/关闭" onclick="closeDiv()"/>
    </div>

</body>