JS对联广告代码初级

最新推荐文章于 2022-11-16 18:31:21 发布

weixin_30691871

最新推荐文章于 2022-11-16 18:31:21 发布

阅读量92

点赞数

原文链接：http://www.cnblogs.com/lzhlearn/p/5786282.html

版权

本文介绍了一种使用HTML和CSS实现的对联广告样式，并通过JavaScript进行动态位置调整，确保广告在页面滚动时始终保持居中显示。文章展示了具体的代码实现方式，包括如何设置固定定位、背景颜色以及关闭按钮等细节。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>对联广告</title>
	<style>
		#leftFloat{
			width: 200px;
			height: 280px;
			background-color: red;
			position: fixed;
			left: 0px;
			/*IE6兼容*/
			_position:absolute;
			_top:expression(document.documentElement.scrollTop+(document.documentElement.clientHeight-this.offsetHeigh)/2);
		}
		#rightFloat{
			width: 200px;
			height: 280px;
			background-color: red;
			position: fixed;
			right: 0px;
			_position:absolute;
			_top:expression(document.documentElement.scrollTop+(document.documentElement.clientHeight-this.offsetHeigh)/2);
		}
		.close{
			height: 20px;
			width: 200px;
			background-color: pink;
			position: absolute;
			bottom: 0px;
			left:0px;
			text-align: center;
			font-size: 20px;			
		}
		.close a{
			text-decoration: none;
			color: #000;
		}
	</style>

	<script>
	window.onload = function (){
		var leftdiv = document.getElementById('leftFloat');
		var rightdiv = document.getElementById("rightFloat");
		var t = (document.documentElement.clientHeight-leftdiv.offsetHeight)/3 + 'px';
		leftdiv.style.top = t;
		rightdiv.style.top = t;
	}

	function close(){
		document.getElementById('leftFloat').style.display='none'; 
		document.getElementById('rightFloat').style.display='none';
	}
	</script>

</head>

<body>
	<div id="leftFloat">
		<div class="close"><a href="javascript:close()">关闭</a></div> 
	</div>
	<div id="rightFloat">
		<div class="close"><a href="javascript:close()">关闭</a></div> 
	</div>
</body>
</html>

转载于:https://www.cnblogs.com/lzhlearn/p/5786282.html