Движение мышки по блоку
Подробно о "onmousemove Event"
- Использование "onmousemove" внутри тега.
- Использование onmousemove + function
- Пример использования onmousemove + addEventListener
- Скачать можно здесь
Использование "onmousemove" внутри тега.
Одним из способов использования onmousemove - размещение "onmousemove" внутри тега.Для того, чтобы продемонстрировать использование "onmousemove" нам понадобится элемент Dom - пусть это будет div, и добавим ему class="onmousemove" :
Также туда добавим событие "onmousemove" с функцией myFunction:
Немного стилей для нашего блока:
background: #e9e9e9;
width: 300px;
height: 100px;
margin: auto;
border: 1px solid;
}
Напишем нашу функцию:
function myFunction(e) {
var x = e.clientX;
var y = e.clientY;
var coor = "Координаты: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML = coor;
}
</script>
Результат использования onmousemove в теге:
Будем передавать координаты в отдельный div "Здесь координаты".
Наведите мышку на блок:
Здесь координаты
Использование onmousemove + function
Второй способ использования onmousemove равно function.
Нам опять понадобится div, внутрь добавим id, чтобы обратиться к тегу
В абзац "p" будем передавать полученные данные:
Стили повторять не буду - см. выше.
Соберем скрипт:
<script>
document.getElementById("theDIV").onmousemove = function(e) {
var x = e.clientX;
var y = e.clientY;
var coor = "Координаты: (" + x + "," + y + ")";
document.getElementById("demo_1").innerHTML = coor;
};
</script>
Результат onmousemove + function
Проведите мышкой по блоку:
Здесь координаты
Пример использования onmousemove + addEventListener
Следующий вариант использования onmousemove, аналогичен первому, только здесь будем использовать "addEventListener":
<div id="theDIV_2" class="onmousemove"></div>
<p id="demo_2"></p>
Аналогичные первому пункту.
<script>
document.getElementById("theDIV_2").addEventListener("mousemove", function(e) {
var x = e.clientX;
var y = e.clientY;
var coor = "Координаты: (" + x + "," + y + ")";
document.getElementById("demo_2").innerHTML = coor;
});
</script>
Результат onmousemove + addEventListener
Здесь координаты
onmousemove
js onmousemove
document onmousemove
событие onmousemove
onmousemove event
onmousemove javascript
window onmousemove
onmousemove куда вписывать программно c builder

подробнее.
подробнее.