js获取当前鼠标位置并输出

最新推荐文章于 2024-08-14 08:01:05 发布

、风天行

最新推荐文章于 2024-08-14 08:01:05 发布

阅读量453

点赞数

原文链接：https://blog.csdn.net/weixin_40687883/article/details/81667657

版权

js获取当前鼠标位置并输出

1.html

<body οnmοusemοve="mousemove(event)"></body>

2.css

html,
body {
	width: 100%;
	height: 100%;
	background: #A5CEDB;
	position: relative;
}
 
.newDiv {
	position: absolute;
	background: red;
	color: white;
	width: 100px;
	height: 50px;
}

3.js

var movex;
	var movey; //用来接受鼠标位置的全局变量
	function mousemove(e) {
		e = e || window.event;
		if(e.pageX || e.pageY) {
			movex = e.pageX;
			movey = e.pageY
		}
		creatDiv(movex, movey);
	}
 
	function creatDiv(x, y) {
		$(".newDiv").remove();
		var str = ("<div class=\'newDiv\'>" + x + "," + y + "</div>");
		$("body").append(str);
		$(".newDiv").css("left", x + "px").css("top", y + "px");
	}