在鼠标移动之后，使用 jquery 在弹出 div 中显示鼠标坐标答案

【问题标题】：Show mouse coordinates in popup div using jquery, following the mouse move在鼠标移动之后，使用 jquery 在弹出 div 中显示鼠标坐标
【发布时间】：2014-07-08 17:22:12
【问题描述】：

我需要能够检查 html 页面内的各种元素位置。为此，我想要一个将鼠标坐标显示为靠近鼠标光标的弹出窗口的 div。

【问题讨论】：

标签： jquery html popup mousemove mouse-coordinates

【解决方案1】：

<html>
<head>
<title>Mouse positioning in jQuery</title>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<style>
#click{
    background-color:#efefef;
    width:300px;
    height:50px;
    text-align:center;
    font:1.2em Arial;
    line-height:50px;
    display:none;
    position:absolute;
    z-index:9999;
}
</style>
<script>
$(document).ready(function(){
    //$(document).click(function(e){ // for click action
    $(document).mousemove(function(e){
        // e.pageX - gives you X position
        // e.pageY - gives you Y position
        //$('#click').html('e.pageX = ' + e.pageX + ', e.pageY = ' + e.pageY);
        $("#click").css({left:(e.pageX+20) + "px", top:(e.pageY+20) + "px"});
        $('#click').html('e.pageX = ' + e.pageX + ', e.pageY = ' + e.pageY);
        $('#click').show();
        //$('#click').slideToggle(); // for toggle show/hide popup
    });
});
</script>
</head>
<body>
On mouse move...

<div id="click">The cursor position will show in this div.</div>

</body>
</html>

【讨论】：