js实现全屏漂浮广告可关闭 

<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Js广告_全屏漂浮广告</title>
		<style type="text/css">
			div#roll {
				width: 200px;
				height: 100px;
				color: #fff;
				background: url(./images/gd.jpg) no-repeat;
				position: absolute;
				font-size: 22px;
				word-break: break-all;
				line-height: 50px;
				text-align: center;
			}
			#btnx{
				position: absolute;
				bottom: 0;
				right: 0;
			}
		</style>
	</head>

	<body>
		<div id="roll">2016级计算机专业<br>毕业设计
			<button type="button" id="btnx">x</button>
		</div>
		<script type="text/javascript">
			
			var ggRoll = {
				roll: document.getElementById("roll"),
				speed: 20,
				statusX: 1,
				statusY: 1,
				x: 0,
				y: 200,
				winW: document.documentElement.clientWidth - document.getElementById("roll").offsetWidth,
				winH: document.documentElement.clientHeight - document.getElementById("roll").offsetHeight,
				Go: function() {
					this.roll.style.left = this.x + 'px';
					this.roll.style.top = this.y + 'px';

					this.x = this.x + (this.statusX ? -1 : 1)
					if (this.x < 0) {
						this.statusX = 0
					}
					if (this.x > this.winW) {
						this.statusX = 1
					}

					this.y = this.y + (this.statusY ? -1 : 1)
					if (this.y < 0) {
						this.statusY = 0
					}
					if (this.y > this.winH) {
						this.statusY = 1
					}
				}
			}
			var interval = setInterval("ggRoll.Go()", ggRoll.speed);
			ggRoll.roll.onmouseover = function() {
				clearInterval(interval)
			};
			ggRoll.roll.onmouseout = function() {
				interval = setInterval("ggRoll.Go()", ggRoll.speed)
			};
			
			var btnx = document.getElementById('btnx');
			var roll = document.getElementById('roll');
			btnx.onclick = function(){
				roll.style.display = 'none';
			}
		</script>


	</body>
</html>

 

posted @ 2020-03-26 21:07  JackieDYH  阅读(15)  评论(0)    收藏  举报  来源