带关闭按钮的滚动广告

最新推荐文章于 2020-11-27 12:53:10 发布

chaoyv

最新推荐文章于 2020-11-27 12:53:10 发布

阅读量3.4k

点赞数 3

分类专栏： JS 粗浅文章标签： javascript java ViewUI

本文链接：https://blog.csdn.net/chaoyv/article/details/84509245

版权

JS 粗浅专栏收录该内容

48 篇文章 2 订阅

订阅专栏

<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

chaoyv

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
带关闭按钮的滚动广告

&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt;&lt;title&gt;带关闭按钮的滚动广告&lt;/title&gt;&lt;style type="text/css"&gt;
复制链接

扫一扫