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

最新推荐文章于 2021-07-11 17:24:06 发布

骆昊的技术专栏

最新推荐文章于 2021-07-11 17:24:06 发布

阅读量2.3k

点赞数 1

分类专栏：程序语言 Web开发文章标签： javascript function stylesheet class null

本文链接：https://blog.csdn.net/jackfrued/article/details/7879517

版权

程序语言同时被 2 个专栏收录

102 篇文章 44 订阅

订阅专栏

Web开发

29 篇文章 7 订阅

订阅专栏

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

骆昊的技术专栏

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript(07): 实例2---网页广告漂浮效果(面向对象版)

在上一个版本的基础上使用JavaScript的面向对象完成，为了不影响阅读，去掉了随滚动条移动的广告 Example function $(id) { return document.getElementById(id); } function Adv(id, speedX, speedY) { this.id = id;
复制链接

扫一扫