<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>带关闭按钮的滚动广告</title>
<style type="text/css">
#float{ z-index:2px; position:absolute; left:50px; top:100px; width:117px; height:150px;}
#close{ z-index:2px; position:absolute; left:154px; top:100px; width:13px; height:13px;}
</style>
</head>
<body>
<div id="main"><img src="images/contentpic.jpg"/></div>
<div id="float"><img src="images/advpic.jpg" /></div>
<div id="close"><img src="images/close.jpg" /></div>
<script type="text/javascript">
var divFloat,divClose,divFloatLeft,divCloseLeft,floatTop;
//获取漂浮广告对象
divFloat = document.getElementById("float");
//获取漂浮广告关闭按钮对象
divClose = document.getElementById("close");
//初始化数据
function init(){
//支持IE浏览器
if(divFloat.currentStyle){
//获取漂浮广告左边距离
divFloatLeft = parseInt(divFloat.currentStyle.left);
//获取漂浮广告上边距离
floatTop = parseInt(divFloat.currentStyle.top);
//支持IE浏览器
}else{
//获取漂浮广告左边距离
divFloatLeft = parseInt(getComputedStyle(divFloat,null).left);
//获取漂浮广告上边距离
floatTop = parseInt(getComputedStyle(divFloat,null).top);
}
//获取漂浮广告按钮左边距离
divCloseLeft = divFloatLeft + 117 - 13;
}
//滚动事件
function scrollEvent(){
var scrollL,scrolT;
//支持IE,FireFox
if(document.documentElement.scrollTop>0 || document.documentElement.scrollLeft>0){
//获取左边滚动距离
scrollL = document.documentElement.scrollLeft;
//获取顶部流动距离
scrollT = document.documentElement.scrollTop;
//支持360,Google
}else{
//获取左边滚动距离
scrollL = document.body.scrollLeft;
//获取顶部流动距离
scrollT = document.body.scrollTop;
}
//改变广告图片和关闭图片的位置
divFloat.style.left = divFloatLeft + scrollL +"px";
divFloat.style.top = floatTop + scrollT +"px";
divClose.style.left = divCloseLeft + scrollL +"px";
divClose.style.top = floatTop + scrollT +"px";
}
window.onscroll = scrollEvent;
window.onload = function(){
init();
//关闭广告按钮事件
divClose.onclick = function(){
divFloat.style.display = "none";
divClose.style.display = "none";
}
}
</script>
</body>
</html>
效果图:
个人E-mail:chaoyi77@163.com