Question

我不确定如何开始这一次。无论哪种方式，当鼠标在页面上移动时，我想在网页上显示x和y坐标。它还必须与任何浏览器一起使用。

下面是HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Coordinates</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="script.js"></script>
    </head>

    <body>
        <div id="center">
             <h1>Mouse Coordinates</h1>
             <p>x-coordinate: </p><p id="xcord">0</p>
             <p>y-coordiante: </p><p id="ycord">0</p>
        </div>
    </body>

</html>

CSS文件：

#center{
    margin: 0 auto;
    width: 500px;

}

JavaScript文件：

不多，不知道从哪里开始......

window.onload = init;

function init(e) {

}

Answer 1

基本上你需要document.addEventListener（'mousemove'，mousemover，false）;它引用了一个函数 - mouseover（） - 它将获取你的clientX和clientY。从那里你需要将你的两个p元素的innerHTML设置为这些值。

Answer 2

你可以使用pageX和pageY这样的东西：

$(document).ready(function(){
$('body').on('mousemove', function init(e) {
   $('#xcord').text(e.pageX);
   $('#ycord').text(e.pageY);
});
});

demo

Answer 3

我想假设您使用的是JQuery，这就是您要寻找的。

$(function(){
    $(document).on('mousemove', function(e){
        $("#xcord").html(e.pageX);
        $("#ycord").html(e.pageY);
    });
});

http://jsfiddle.net/Zvm7s/2/

希望有所帮助

显示X和Y坐标？

3 个答案: