jquery - 动画半饼图

Question

我在 Flash 中创建了这个图形“半饼”:http://www.elperiodico.com/es/elecciones-28n/
现在我将其移植到 JavaScript:http://especiales.elperiodico.com/LABS/ELEC2011B/html/emi-basic2.htm

我希望 JavaScript“半饼图”使用与 Flash 版本从左到右相同的动画，但无法做到。

有人愿意帮忙吗？

Answer 1

正如所 promise 的，我已经研究过这个并为您提供了一个良好的开端，您可以与之合作:

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/

希望这能为您提供一个良好的起点。

铝