JavaScript获取当前鼠标指针坐标

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

PkJY

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

阅读量2.2k

点赞数

分类专栏： HTML/CSS/Javascript 文章标签：指针前端 javascript

本文链接：https://blog.csdn.net/a214161398a/article/details/49848835

版权

HTML/CSS/Javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

接触了HTML+CSS+JS一小段时间了，发现如果想要有比较好的用户体验，良好的交互，在CSS动画的同时，必需要用到获取当前鼠标指针所在的坐标。

比如一款jQuery/CSS3写的侧边栏菜单，所用到的效果，点击每一个li选项时，都有一片淡白色缩放，非常美观。点击查看。

于是我也寻思做一下类似这样的效果，研究了一番后发现动画大概是这样的：

.ink {
	display: block;
	position: absolute;
	background: rgba(255,255,255,.3);
	border-radius: 100%;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0)
}

.animate-ink {
	-webkit-animation: ripple .5s linear;
	-moz-animation: ripple .5s linear;
	-ms-animation: ripple .5s linear;
	-o-animation: ripple .5s linear;
	animation: ripple .5s linear
}

@-webkit-keyframes ripple {
	100% {
		opacity: 0;
		-webkit-transform: scale(2.5)
	}
}

@-moz-keyframes ripple {
	100% {
		opacity: 0;
		-moz-transform: scale(2.5)
	}
}

@-o-keyframes ripple {
	100% {
		opacity: 0;
		-o-transform: scale(2.5)
	}
}

@keyframes ripple {
	100% {
		opacity: 0;
		transform: scale(2.5)
	}
}

定义了一个叫做ripple的动画，但是注意细节就不容易发现，页面中点哪个位置，就会以那个坐标点进行白色缩放，打开F12查看发现，每个被点击的li除了被加上定义的那个动画效果外，还会添加上一个style，每次点击的位置不一样，style里的坐标也就不一样，如下图画红色横线部分。

那么这个细节靠的就是获取当前坐标来实现的。

以下是一个获取当前鼠标位置的Demo。（JavaScript实现）

<html> 
<head> 
<meta charset="UTF-8"/> 
<title>JavaScript获取当前鼠标指针坐标</title> 
</head> 
<body> 
<script type="text/javascript";> 
function mouseMove(e) { 
    var mousePos = mouseCoords(e); 
    document.getElementById("xxx").value = mousePos.x; 
    document.getElementById("yyy").value = mousePos.y; 
} 
function mouseCoords(e) { 
    if(e.pageX || e.pageY){ 
        return {x:e.pageX, y:e.pageY}; 
    }
    return{ 
        x:e.clientX + document.body.scrollLeft - document.body.clientLeft, 
        y:e.clientY + document.body.scrollTop - document.body.clientTop 
    }; 
} 
document.onmousemove = mouseMove; 
</script> 
鼠标X轴: 
<input id="xxx" type=text> 
鼠标Y轴: 
<input id="yyy" type=text> 
</body>