-3

これをどのように開始すればよいかよくわかりません。いずれにせよ、マウスがページ上を移動したときに Web ページに 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); が必要です。clientX と clientY を取得する関数 - mouseover() を参照します。そこから、2 つの p 要素の innerHTML をそれらの値に設定する必要があります。

于 2013-10-07T05:03:06.040 に答える
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 に答える
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 に答える