-3

我真的不知道如何开始这个。无论哪种方式，当鼠标在页面上移动时，我想在网页上显示 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) {

}
4

3 回答 3

1

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

于 2013-10-07T05:03:06.040 回答
0

您可以像这样使用 pageX 和 pageY ：

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

演示

于 2013-10-07T05:01:41.283 回答
0

我想这就是你正在寻找的假设你正在使用 JQuery。

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

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

希望能帮助到你

于 2013-10-07T05:04:55.140 回答