Вторник, 10 Июля 2012 13:42

Определить координаты курсора

Written by 
Оцени эту запись
(16 Голоса)

Допустим, нам нужно определить координаты курсора мыши, когда она движется по некоторому элементу. Для простоты приведу пример для движения по body:

 

<script>
$(function(e){
$('body').mousemove(function(e){
var x = e.pageX;
var y = e.pageY;
});
});</script> 

 

В этом стрипте написанном на jQuery переменные x и y - это и есть координаты курсора по горизонтали и вертикали.

 

Приведу наглядный пример. Ниже вы видите два черных блока - большой и маленький. Когда вы будете водить мышкой по большому, в маленьком будут выводиться координаты x и y курсора.

 

 

 
 

 

 

HTML:

 

 

<div class="cursor_coord_block" style="height: 200px; border: 1px solid #7D26CD; margin-bottom: 20px; background: #000;">&nbsp;</div>
<div class="cursor_coord_res" style="height: 20px; border: 1px solid #7D26CD; background: #000;">&nbsp;</div>
 
 

 

jQuery:

 

 

$(document).ready(function(){
   $('.cursor_coord_block').mousemove(function(e){
      var x = e.pageX;
      var y = e.pageY;
      $('.cursor_coord_res').text('X = '+e.pageX+', Y = '+e.pageY);
   });
});

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов