Урок 3. Событие Mousemove на javascript

Автор: | 22.06.2016
Нет комментариев

СОБЫТИЯ и МЕТОДЫ

onmousemove — Событие onmousemove используется для определения перемещения курсора мыши в любом направлении экрана. Это событие применяется для создания различных эффектов, связанных с курсором мыши.

Math.round () Метод, округляет число до ближайшего целого числа.

Свойство clientX возвращает горизонтальную координату (в зависимости от клиентской области) указателя мыши, когда событие мыши сработает.

Свойство clientY возвращает вертикальную координату (в зависимости от клиентской области) указателя мыши, когда событие мыши сработает.

КОД

<!DOCTYPE html>
<html>
<head>
    <title></title>
  <meta charset="utf-8">
    <style type="text/css">
    #obj{
        width: 100px;
        height: 100px;
    position: absolute;
    }
    </style>
    
  <script type="text/javascript">
        function UpdateFlyingObj (event) {
            var mouseX = Math.round (event.clientX);
            var mouseY = Math.round (event.clientY);

            var flyingObj = document.getElementById ("obj");
            flyingObj.style.left = mouseX + "px";
            flyingObj.style.top = mouseY + "px";

        }
    </script>
    
</head>
<body  onmousemove="UpdateFlyingObj (event);" style="position:absolute; top:0; left:0; bottom:0; right:0;">
<div">
<img id="obj" style="position : relative; left : 111px; top : 111px;" src="1.gif">
</div>
</body>
</HTML>

КАРТИНКА

1