Javascript动画ontop图像

Question

是否可以在图像顶部进行javascript动画？如果是这样，怎么样？

这是我的形象，我想在地图中的部门周围添加多个操纵者。我尝试使用CSS和javascript但失败了，我无法在图片上添加贴图。

我尝试的方法是在IMG标签中创建带有stickmen图片的div元素。然后尝试使用javascript动画特定的div。它不起作用。

Answer 1

有很多方法可以做到这一点。这是一个简单的例子，显示了两种方式：

1. 蓝点：使用absolute positioning和jQuery的animate()
2. 红点：使用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>