首页 > 代码库 > 制作浮动广告(注意:会出现闪屏效果)
制作浮动广告(注意:会出现闪屏效果)
<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>