Question

如何在div中显示鼠标的位置？一旦我们将鼠标移动到新位置，div中显示的值就会改变。

HTML

<div id="info"></div>

CSS

#info{
position:absolute;
bottom:20px;
right:20px;
width:100px;
height:100px;
background-color:black;
}

我希望鼠标的位置显示在黑色div＆＃34; info＆＃34;内部。每次移动时都必须刷新内部的值。每当我们移动它时都应该显示鼠标的位置。

Answer 1

这是jQuery解决方案

$(document).ready(function() {
    $(this).on("mousemove", function(event) {
        var position = "X Coordinate: " + event.pageX + " Y Coordinate: " + event.pageY
        $("div").filter("#info").text(position);       
    });
});

http://jsfiddle.net/L7zkvnqr/1/

首先，您要收听mousemove事件，将event作为参数传递非常重要。

您现在想要使用pageX和pageY属性声明变量。它们分别返回鼠标位置的x和y坐标。

然后使用text()函数并传入刚刚定义的新位置变量。

这是一个JavaScript解决方案

document.body.addEventListener("mousemove", function(event) {
    var div = document.querySelector("#info");
    var position = "X Coordinate: " + event.clientX + " Y Coordinate: " + event.clientY;
    div.innerHTML(position);
});

显示鼠标位置

1 个答案: