如何在网页上单击按钮时制作html5动画？

Question

我想要一个我想在html5中创建的交互式动画。我希望在4-4-2这样的阵型上有一个带球衣的足球场，并且侧面有不同的选项来改变阵型让我们说4-5-1然后点击这个按钮说4 -5-1球衣将在球场上重新排列成那个形状。 有关如何做到这一点的任何想法？

提前致谢

Answer 1

最简单，最无依赖的方法是将JavaScript函数添加到按钮或元素的 onClick 属性中，然后让JavaScript通过编辑其位置来移动玩家，属性等等。

但是，我建议使用jQuery，因为它通常更容易。然后，您可以将操作绑定到按钮的id（您的id =“...”属性）。例如：

$(document).ready(function() {
  $("mybuttonid").click(function(event){
    ...
  });
});

Answer 2

http://jsfiddle.net/rlemon/3YRzS/

像提到的那样，jquery和animate。

Answer 3

某些浏览器可能会使用CSS3关键帧动画，例如粉碎杂志的网站上所示 - http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/