動畫半餅圖

Question

我創建在Flash這個圖形「半餡餅」：http://www.elperiodico.com/es/elecciones-28n/
現在我把它移植到JavaScript的：http://especiales.elperiodico.com/LABS/ELEC2011B/html/emi-basic2.htm

我想JavaScript的「半餡餅」使用同樣的動畫從左正如Flash版本一樣，但無法做到這一點。

有人會這麼善良以幫助嗎？

Answer 1

按照承諾我有一個看看這個，並取得了良好的開端，你，你可以一起工作：

HTML

<div id="graph"><img src="http://ajthomas.co.uk/back.png"></div> 

CSS

#graph{ 
    background:transparent url(http://ajthomas.co.uk/graph.png) no-repeat top left; 
    height:125px; 
    width:290px; 
    overflow:hidden; 
} 

jquery

$("img").rotate({ 
    bind: 
    { 
     click : function() { 
      $(this).rotate({animateTo:180}) 
     } 
    } 
}); 

看到它在行動這裏 - http://jsfiddle.net/ajthomascouk/hWt2v/

它使用了一個名爲「jqueryrotate」插件檢查出來這裏 - http://code.google.com/p/jqueryrotate/

希望這給你一個很好的起點。

Al