如何在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;内部。每次移动时都必须刷新内部的值。每当我们移动它时都应该显示鼠标的位置。
答案 0 :(得分: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);
});