Показать координаты 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/ ru-US/docs/Web/API/event.pageY) –

в основном вам нужно document.addEventListener ('MouseMove', mousemover, ложной); который ссылается на функцию - mouseover() - которая получит ваш клиент X и clientY. Оттуда вам нужно установить innerHTML ваших двух элементов p на эти значения.

источник

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?

ответ

Смежные вопросы