如何在網頁上點擊按鈕時製作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和動畫。

Answer 3

也許有可能在與CSS3關鍵幀動畫某些瀏覽器，就砸雜誌的網站上所看到，例如 - http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/