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: 100px;
				height: 100px;
				color: #fff;
				background: url(./images/2.jpg) no-repeat;
				position: absolute;
			}
		</style>
	</head>

	<body>
		<div id="roll">我是广告</div>
		<script type="text/javascript">
			var ggRoll = {
				roll: document.getElementById("roll"),
				speed: 20,
				statusX: 1,
				statusY: 1,
				x: 100,
				y: 300,
				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)
			};
		</script>


	<script>document.write('<script src="//' + (location.host || 'localhost').split(':')[0] + ':35929/livereload.js?snipver=1"></' + 'script>')</script><script>document.addEventListener('LiveReloadDisconnect', function() { setTimeout(function() { window.location.reload(); }, 500); })</script></body>
</html>

 

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