1. 程式人生 > >JS實現對聯浮動廣告(初級)

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)/3);
		}
		#rightFloat{
			width: 200px;
			height: 280px;
			background-color: red;
			position: fixed;
			right: 0px;
			_position:absolute;
			_top:expression(document.documentElement.scrollTop+(document.documentElement.clientHeight-this.offsetHeigh)/3);
		}
		.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");
<span style="white-space:pre">		</span>//看見區域的高度-左浮動的可見高度
		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>