При наведении указателя на шар,шар должен привязаться к указателю и будет привязан до тех пор пока мы водим указатель по контуру
начал учить javascript и получил задание которое не могу осилить... Получил изображение с контуром молнии. При наведении указателя на шар,шар должен привязаться к указателю и будет привязан до тех пор пока мы водим указатель по контуру молнии,но как только указатель выйдет за контур шар должен медленно возвращаться к начальной точке. Но во время возвращения шара на начальную точку, должна быть возможность указателем навести на него и продолжить водить по контуру молнии. Подсказки от учителя: 1.шар должен быть в позиции абсолютной. 2.через javascript надо написать линии по которым будет он двигаться 3.цикл 4.addEventListener на hover . пока что удалось только это...
const svgElement = document.getElementById('svg');
svgElement.addEventListener("mouseover", gomouse);
function gomouse() {
document.addEventListener('mousemove', e => {
svg.style.left = e.pageX + "px";
svg.style.top = e.pageY + "px";
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: 48px;
top: 198px;
width: 35px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hower</title>
</head>
<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>
</html>