
Совсем недавно выполнял одну задачку, где требовалось находить позицию курсора мыши в элементе страницы. Представьте себе видеоплеер с прогресс баром на сайте, и вам нужно вычислять ту секунду видео, на которую вы указываете мышью. Вот вот ))
Наткнулся на одно решение в Интернетах. Делюсь им с вами, немного модернизировав его.
Смысл в том, чтобы вычислить координаты нужного элемента и координаты курсора мыши на странице, когда мы находимся «в элементе». Разница между этими значениями и будет составлять нужные нам величины.
Для этого нам понадобятся:
- Элемент на странице. Я использовал простой контейнер с id
1<div id="area"></div> - Библиотека iQuery
- Сам скрипт
123456789101112131415$('#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);});
Пример можно увидеть тут. Не забудьте включить консоль — там все увидите.