Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Движение мышки по блоку

Поддержи проект!!! smile

onmousemove javascript или "Движение мышки по блоку", сколько способов существует определить движение мышки по элементу Dom?

Подробно о "onmousemove Event"

  1. Использование "onmousemove" внутри тега.
  2. Использование onmousemove + function
  3. Пример использования onmousemove + addEventListener
  4. Скачать можно здесь
  1. Использование "onmousemove" внутри тега.

    Одним из способов использования onmousemove - размещение "onmousemove" внутри тега.

    Для того, чтобы продемонстрировать использование "onmousemove" нам понадобится элемент Dom - пусть это будет div, и добавим ему class="onmousemove" :

    Также туда добавим событие "onmousemove" с функцией myFunction:

    <div onmousemove="myFunction(event)" class="onmousemove"></div>
    Css:

    Немного стилей для нашего блока:

    .onmousemove{
    background: #e9e9e9;
    width: 300px;
    height: 100px;
    margin: auto;
    border: 1px solid;
    }
    javascript

    Напишем нашу функцию:

    <script>
    function myFunction(e) {
    var x = e.clientX;
    var y = e.clientY;
    var coor = "Координаты: (" + x + "," + y + ")";
    document.getElementById("demo").innerHTML = coor;
    }
    </script>

    Результат использования onmousemove в теге:

    Будем передавать координаты в отдельный div "Здесь координаты".

    Наведите мышку на блок:

    Здесь координаты

  2. Использование onmousemove + function

    Второй способ использования onmousemove равно function.

    Нам опять понадобится div, внутрь добавим id, чтобы обратиться к тегу

    <div id="theDIV" class="onmousemove"></div>

    В абзац "p" будем передавать полученные данные:

    <p id="demo_1"></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

    Проведите мышкой по блоку:

    Здесь координаты

  3. Пример использования onmousemove + addEventListener

    Следующий вариант использования onmousemove, аналогичен первому, только здесь будем использовать "addEventListener":

    Html:

    <div id="theDIV_2" class="onmousemove"></div>

    <p id="demo_2"></p>

    Css:

    Аналогичные первому пункту.

    javascript

    <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

    Здесь координаты


Последняя дата редактирования : 06.02.2021 17:12
Название скрипта :Функция onmousemove
Скрипт № 62.3Ссылка на скачивание : Все скрипты на одной странице
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
onmousemovejs onmousemove document onmousemoveсобытие onmousemoveonmousemove eventonmousemove javascript window onmousemoveonmousemove куда вписывать программно c builder

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
13/04/2021 08:12
Во-первых пожалуйста!1). $new_array - был прописан оттого, что контент на сайте пишется на живых примерах. И часто…
подробнее.
Валерий :
13/04/2021 05:47
перебрал весь материал- во первых спасибоискал другое но понравился Ваш материалerror - или неточность 1. везде…
подробнее.
Марат :
08/04/2021 07:12
Сам афигеваю!
подробнее.
stream :
07/04/2021 05:56
Неплохо)
подробнее.
Марат :
24/03/2021 11:01
Да что вы!? За что обижаться то?Вы тот редкий человек, который смог написать! Вы молодец!Человек, же который не…
подробнее.