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