天天看点

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

<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  onload="getInitTop()">

 <div id="floatDiv" style="width:80px;height:72px; position:absolute; top:100px">

     <img src="image/float.gif"/><br />

     <input type="button" value="关闭" onclick="closeDiv()"/>

    </div>

</body>

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