как изменять left и top у hover через js что бы иметь возможность провести шар по контуру молнии

Question

предполагаю что необходимо создать массив с left и top для hover и для svgElement. После отслеживать через addEventListener местоположение и при необходимости заменять left и top. как это реализовать ??? спасибо за помощь.

 const svgElement = document.getElementById('svg');
        svgElement.addEventListener("mousemove", gomouse);

        function gomouse(e) {
            document.addEventListener('mousemove', e => {
                var x = e.pageX;
                var y = e.pageY;
                var coor = "X coords: " + x + ", Y coords: " + y;
                document.getElementById("demo").innerHTML = coor;
            });
        }

body {
    background: url(https://frontdevhero.pl/api/assets/thunder.png) no-repeat top center;
}


img {
    position: absolute;
    left: 55px;
    top: 202px;
    width: 35px;
    transition-duration: 10s;
}

img:hover {
    left: 289px;
    top: 265px;
}

<body>
    <div>
        <img id="svg"
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Wikiexpedition_logo.svg/1200px-Wikiexpedition_logo.svg.png"
            alt="">
    </div>

    <p id="demo"></p>
</body>

Answer 1

addEventListener местоположение и при необходимости заменять left и top.

А как это будет выглядеть на телефоне? Если телефон, конечно, актуален в данном деле. Писать скрипт, который будет чекать ширину экрана? Каша получается из топора.

В вашем случае проще сделать один svg и выводить его на страницу не через тег изображения img, а вставлять в тело инлайн. И в этом файле пишите свою svg анимацию без js, только вот для этого сам svg код должен быть написать под эту задачу правильно. Чтобы Вы могли отслеживать путь и направлять шарик именно по этому пути. А если Вам надо при наведении сделать анимацию, то тут на js отследить что на объект наведен курсор (можно использовать on hover, touch), далее добавлять класс к svg элементу или дописать кусок кода в svg элемент, в общем сделать что-то чтобы запустилась анимация при событии наведения/тача.

Задача не сложная, но svg все-таки правильный нужен. А если маленькие экраны актуальны, то тут все просто, к svg добавляешь свойство width:100%

БЛОГ НА HUSL

как изменять left и top у hover через js что бы иметь возможность провести шар по контуру молнии

Ответы (1 шт):