顯示X和Y座標？

-3

我不太確定如何開始這一關。無論哪種方式，當鼠標移動到頁面上時，我想在網頁上顯示x和y座標。它也必須使用任何瀏覽器。顯示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) { 

}

來源

2013-10-07 user2619395

['onmousemove']（https://developer.mozilla.org/en-US/docs/Web/API/Window.onmousemove）和[ 'e.pageX']（https://developer.mozilla.org/en-US/docs/Web/API/event.pageX），['e.pageY']（https://developer.mozilla.org/ en-US/docs/Web/API/event.pageY） –

基本上你需要document.addEventListener（ '鼠標移動'，mousemover，FALSE）;引用一個函數 - mouseover（） - 這會得到你的clientX和clientY。從那裏你需要將你的兩個p元素的innerHTML設置爲這些值。

來源

2013-10-07 05:03:06

謝謝！這正是我需要的。 – user2619395

不用擔心，很高興我可以幫助:) –

您可以使用pageX和pageY是這樣的：

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

demo

來源

2013-10-07 05:01:41

自從附加到onload時，只會獲得一次座標，需要附加到onmousemove。 –

我想這是你正在尋找假設你正在使用JQuery。

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

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

希望它能幫助

來源

2013-10-07 05:04:55 PSK

顯示X和Y座標？

回答

相關問題