弹块(广告悬浮窗)

最新推荐文章于 2025-08-04 14:53:09 发布

古理

最新推荐文章于 2025-08-04 14:53:09 发布

阅读量154

点赞数

CC 4.0 BY-SA版权

分类专栏：前端web 文章标签：前端 javascript css

本文链接：https://blog.youkuaiyun.com/weixin_54089340/article/details/127693840

前端web 专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			div {
				position: relative;
				width: 100px;
				height: 100px;
				/* background-image: url("./imges/88.jpeg"); */
				background-color: red;
				border: 2px solid black;

			}

			#but {
				position: absolute;
				background-color: aqua;
				right: 0;
				top: 0;
				/* 指针/手型图标 */
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="myDiv">
			<button id="but" onclick="myClose()">关闭</button>
		</div>
		<script>
			var div = document.getElementById("myDiv");
			var but = document.getElementById("but");
			var timer = setInterval(move, 100);
			var x = -10;
			var y = -10;

			function move() {

				var wt = document.documentElement.clientWidth;
				var ht = document.documentElement.clientHeight;
				// console.log("wt=", wt);
				// console.log("ht=", ht);
				var lf = parseInt(getComputedStyle(div, null)["left"]);
				var tp = parseInt(getComputedStyle(div, null)["top"]);
				//判断上边是否相交,
				//判断下边是否相交
				if (div.getBoundingClientRect().top <= 0 || div.getBoundingClientRect().bottom >= ht) {
					y = -y;
				}
				//判断左边是否相交
				//判断右边是否相交
				if (div.getBoundingClientRect().left <= 0 || div.getBoundingClientRect().right >= wt) {
					x = -x;
				}
				div.style.left = lf + x + "px";
				div.style.top = tp + y + "px";
			}

			function myClose() {
				div.remove();
			}
			div.onmousemove = function() {
				clearInterval(timer);
			}
			div.onmouseout = function() {
				timer = setInterval(move, 100);
			}
		</script>
	</body>
</html>

在这里插入图片描述