Совсем недавно выполнял одну задачку, где требовалось находить позицию курсора мыши в элементе страницы. Представьте себе видеоплеер с прогресс баром на сайте, и вам нужно вычислять ту секунду видео, на которую вы указываете мышью. Вот вот ))

Наткнулся на одно решение в Интернетах. Делюсь им с вами, немного модернизировав его.

Смысл в том, чтобы вычислить координаты нужного элемента и координаты курсора мыши на странице, когда мы находимся «в элементе». Разница между этими значениями и будет составлять нужные нам величины.

Для этого нам понадобятся:

1. Элемент на странице. Я использовал простой контейнер с id
   
   <div id="area"></div>

   1	<div id="area"></div>

2. Библиотека iQuery
3. Сам скрипт
   
   $('#area').mousemove(function(e){ // позиция элемента var elem = $(this); var elemLeft = elem.offset().left; var elemTop = elem.offset().top; // позиция курсора внутри элемента var innerX = e.pageX - elemLeft; var innerY = e.pageY - elemTop; // выводим в консоль, очищая ее каждый раз console.clear(); console.log("X: " + innerX); console.log("Y: " + innerY); });

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   $('#area').mousemove(function(e){     // позиция элемента     var elem = $(this);     var elemLeft = elem.offset().left;     var elemTop = elem.offset().top;       // позиция курсора внутри элемента     var innerX = e.pageX - elemLeft;     var innerY = e.pageY - elemTop;       // выводим в консоль, очищая ее каждый раз     console.clear();     console.log("X: " + innerX);     console.log("Y: " + innerY); });

Пример можно увидеть тут. Не забудьте включить консоль — там все увидите.