JavaScript(07): 实例2---网页广告漂浮效果(面向对象版)

清疚 2021-09-22 09:56 211阅读 0赞

在上一个版本的基础上使用JavaScript的面向对象完成，为了不影响阅读，去掉了随滚动条移动的广告

<!DOCTYPE html>
    
    <html>
    	<head>
    		<title>Example</title>
    		<meta http-equiv="content-type" content="text/html; charset=GBK" />
    		<link type="text/css" rel="stylesheet" href="css/global.css" />
    		<script type="text/javascript">
    			function $(id) {
    				return document.getElementById(id);
    			}
    
    			function Adv(id, speedX, speedY) {
    				this.id = id;
    				this.x = parseInt(document.defaultView.getComputedStyle($(id), null).left);
    				this.y = parseInt(document.defaultView.getComputedStyle($(id), null).top);
    				this.width = parseInt(document.defaultView.getComputedStyle($(id), null).width);
    				this.height = parseInt(document.defaultView.getComputedStyle($(id), null).height);
    				this.speedX = speedX;
    				this.speedY = speedY;
    
    				this.move = function() {
    					var _this = this;
    					setInterval(
    						function() {
    							var browserHeight = document.documentElement.clientHeight;
    							var browserWidth = document.documentElement.clientWidth;
    
    							if(_this.y >= browserHeight - _this.height || _this.y <= 0) {
    								_this.speedY = -_this.speedY;
    							}
    							if(this.x >= browserWidth - this.width || this.x <= 0 ) {
    								_this.speedX = -_this.speedX;
    							}
    								
    							_this.y += _this.speedY;
    							_this.x += _this.speedX;
    								
    							$(_this.id).style.top = _this.y + "px";
    							$(_this.id).style.left = _this.x + "px";
    						}, 50);
    				};
    			}
    
    			window.onload = function() {
    				var obj = new Adv("madv", 2, 2);
    				obj.move();
    			}
    		</script>
    	</head>
    
    	<body style="font-family:Times New Roman">
    		<h1>LUO Hao's Baidu Blog</h1>
    		<hr/>
    		<div id="madv">advertisement</div>
    		<div class="container" align="center">
    			<div class="advX"></div>
    			<div class="center">
    				<div style="margin:0px 0px 0px 0px"><img src="images/bg1.png"/></div>
    				<div style="margin:0px 0px 0px 0px"><img src="images/bg2.png"/></div>
    			</div>
    			<div class="right"></div>
    		</div>
    	</body>
    </html>