开发者

Animate half pie diagram

开发者 https://www.devze.com 2023-02-25 06:19 出处:网络
I created this graphic \"half pie\" in Flash: http://www.elperiodico.com/es/elecciones-28n/ Now I ported it to JavaScript: http://especiales.elperiodico.com/LABS/ELEC2011B开发者_Go百科/html/emi-basic2

I created this graphic "half pie" in Flash: http://www.elperiodico.com/es/elecciones-28n/

Now I ported it to JavaScript: http://especiales.elperiodico.com/LABS/ELEC2011B开发者_Go百科/html/emi-basic2.htm

I would like the JavaScript "half pie" to use the same animation from left to right as the Flash version, but can't do it.

Would someone be so kind as to help?


As promised i've had a look at this and have made a good start for you that you can work with:

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})
        }
     }   
});

See it in action here - http://jsfiddle.net/ajthomascouk/hWt2v/

It uses a plugin called 'jqueryrotate' check it out here - http://code.google.com/p/jqueryrotate/

Hope this gives you a good starting point.

Al

0

精彩评论

暂无评论...
验证码 换一张
取 消