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

来源：互联网发布：苏州俊知地产编辑：程序博客网时间：2024/05/17 02:16

在上一个版本的基础上使用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>