码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-07-06 17:28:26      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:style   java   使用   width   os   cti   

<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>

制作浮动广告(注意:会出现闪屏效果),布布扣,bubuko.com

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

标签:style   java   使用   width   os   cti   

原文地址:http://www.cnblogs.com/danmao/p/3825150.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!