Javascript анимация ontop изображения

Question

Возможно ли сделать анимацию javascript на вершине изображения? ЕСЛИ так, как?

Это мое изображение, я хочу добавить несколько маркеров, идущих по отделам на карте. Я пробовал использовать CSS и javascript, но не смог, я не смог добавить stickmen ontop изображения.

Подход, который я пробовал, создавал элементы div с картинками внутри них в тегах IMG. Затем попытался использовать javascript для анимации конкретных div. Это не работает.

Answer 1

Есть много способов сделать это. Вот простой пример, который показывает два пути:

1. Синяя точка: использование absolute positioning и animate()
2. Красная точка JQuery: использование CSS keyframe animations

function doAnimate() { 
 
    $("#animate").css({top: "76px", left: "204px"}).animate({top: "110px", left: "208px"}, 1000).animate({top: "110px", left: "97px"}, 1500).animate({top: "76px", left: "104px"}, 1000).animate({top: "76px", left: "204px"}, 1500); 
 
}; 
 

 
doAnimate(); 
 
setInterval(doAnimate, 5100);

#image { 
 
    height: 200px; 
 
    width: 300px; 
 
} 
 

 
#animate { 
 
    position: absolute; 
 
    top: 100px; 
 
    background-color: blue; 
 
    height: 5px; 
 
    width: 5px; 
 
    border-radius: 50%; 
 
} 
 

 

 
#animateCSS { 
 
    position: absolute; 
 
    background-color: red; 
 
    height: 5px; 
 
    width: 5px; 
 
    border-radius: 50%; 
 
    animation: testAnimation 5.1s infinite; 
 
} 
 

 
@keyframes testAnimation { 
 
    0% { top: 110px; left: 97px; } 
 
    20% { top: 76px; left: 104px; } 
 
    50% { top: 76px; left: 204px; } 
 
    70% { top: 110px; left: 208px; } 
 
    100% { top: 110px; left: 97px; } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<img id="image" src="http://i.stack.imgur.com/egt7S.jpg" /> 
 
<div id="animate"></div> 
 
<div id="animateCSS"></div>