BOM窗口下的一个小案例

最新推荐文章于 2022-06-21 21:29:06 发布

X_dam

最新推荐文章于 2022-06-21 21:29:06 发布

阅读量180

点赞数

本文链接：https://blog.csdn.net/X_dam/article/details/103967921

版权

我们首先回顾一下DOM与BOM

DOM与BOM的区别

DOM	BOM
文档对象模型	浏览器对象模型
顶级对象是document	顶级对象是window
操作页面元素	学习浏览器窗口交互的一些对象
标准化组织是w3c	BOM是浏览器厂商在各自浏览器上定义的，缺乏标准

这个小案例我把它起名为“如果你追上我···”利用的是获取文档显示区的宽高让图片随机生成在页面上，当鼠标移入时图片就会跑掉，下面是演示图
在这里插入图片描述
下面就是代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>如果你追到我···</title>
	<style>
		.box{
			width: 400px;
			height: 400px;
			/*border: 1px solid black;*/
			position: fixed;
			line-height: 400px;
		}
		.tom{
			width: 342px;
			height: 342px;
			margin-top: 29px;
			margin-left: 29px;
		}
		img{
			display: block;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="box" id="box">
		<div class="tom" id="tom">
			<img src="img/timg.jpg" alt="">
		</div>
	</div>
	
	<script>
		var box = document.getElementById('box');
		var pagewidth = window.innerWidth;
		var pageheight = window.innerHeight;
		var x = Math.random()*(pagewidth-342);
		var y = Math.random()*(pageheight-342);
		box.style.top = y + 'px';
		box.style.left = x + 'px';
		box.onmouseover = function(){
			var x = Math.random()*(pagewidth-342);
			var y = Math.random()*(pageheight-342);
			box.style.top = y + 'px';
			box.style.left = x + 'px';
		}

	</script>
</body>
</html>

这个案例的原理就是随机生成图片的坐标，为了能让图片一直生成在当前视口里我们随机的坐标要在视口宽高的基础上减去图片的宽高，并将图片的定位在随机的宽高上，接着就是绑定一个鼠标移入的事件，当鼠标移入时图片的位置就随机出去。
不过代码里面有一个小心机，既然是不能让人追到，但是绑定的事件又是鼠标移入事件，所以原理上来讲当事件触发的话其实是追到了的，所以我们可以在图片的基础上把外面的盒子宽高设大一点，把事件绑定在外面的盒子上并且不设边框，这样的话每当鼠标靠近图片时都会随机生成位置也就不会“追”到图片啦

X_dam

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM窗口下的一个小案例

我们首先回顾一下DOM与BOMDOM与BOM的区别DOMBOM文档对象模型浏览器对象模型顶级对象是document顶级对象是window操作页面元素学习浏览器窗口交互的一些对象标准化组织是w3cBOM是浏览器厂商在各自浏览器上定义的，缺乏标准这个小案例我把它起名为“如果你追上我···”利用的是获取文档显示区的宽高让图片随机生成在页面上，当...
复制链接

扫一扫