JS对联广告代码初级 

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

　　

posted @ 2016-08-19 09:22  那些让你奋斗的理由  阅读(1393)  评论(0)  编辑  收藏  举报