在使用s创建一个可以随鼠标移动的盒子（onmousemove）（一）

最新推荐文章于 2022-10-26 09:14:21 发布

家里有蜘蛛

最新推荐文章于 2022-10-26 09:14:21 发布

阅读量291

点赞数 1

分类专栏： # 原生js

本文链接：https://blog.csdn.net/qq_44983621/article/details/90489717

版权

原生js 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

在使用s创建一个可以随鼠标移动的盒子

这个方法同样是使用下x,y的坐标
坐标的使用方法的解释可以参考我发布的上一篇关于坐标的使用点击进入

可以随着鼠标移动 在这里插入图片描述

想要成功应用的话必须给盒子加一个定位

<script type="text/javascript">
			window.onload = function(){
				var box = document.getElementById("box");
				document.onmousemove = function(event){
					event = event || window.event;
					var left = event.clientX;//获取可见窗口的 鼠标 坐标
					var top = event.clientY;			
					box.style.left = left + sl + "px";
					box.style.top = top + st + "px";
				}
			}
		</script>

此方法有一些局限只能获取当前窗口的坐标，如果网页中过长有滚动条是这个方法就会错误
因为这个 clientX属性获取可见窗口的鼠标的坐标
因此可以找一个获取整个页面坐标的属性

pageX 和 pageY 可以获取整个页面的属性

<script type="text/javascript">
			window.onload = function(){
				var box = document.getElementById("box");
				document.onmousemove = function(event){
					event = event || window.event;
					var left = event.pageX;//获取整个页面的鼠标的坐标
					var top = event.pageY;
					box.style.top = top + "px";
					box.style.left = left + "px";
				}
			}

这个方法虽然但IE8中依然无法使用

下面为整体预览图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				background-color: #00FFFF;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box = document.getElementById("box");
				document.onmousemove = function(event){
					event = event || window.event;
					// var left = event.clientX;//获取可见窗口的 鼠标 坐标
					// var top = event.clientY;
					var left = event.pageX;//整个页面但是ie8不支持
					var top = event.pageY;
					box.style.left = left + "px";
					box.style.top = top + "px";
				}
			}
		</script>
	</head>
	<body style="height: 1000px;width: 3000px;">
		<div id="box"></div>
	</body>
</html>

这个兼容问题涉及一些高度问题在下一篇博客中详细处理点击这里进入下一篇

家里有蜘蛛

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在使用s创建一个可以随鼠标移动的盒子（onmousemove）（一）

在使用s创建一个可以随鼠标移动的盒子这个方法同样是使用下x,y的坐标坐标的使用方法的解释可以参考我发布的上一篇关于坐标的使用可以随着鼠标移动想要成功应用的话必须给盒子加一个定位<script type="text/javascript"> window.onload = function(){ var box = document.getElementById...
复制链接

扫一扫