Infographic是一款有趣而非常個(gè)性化的jquery插件，它可以輕松的使用SVG創(chuàng)建動(dòng)感十足的信息圖。而SVG的優(yōu)點(diǎn)是生成的圖片是矢量的，可以無(wú)限的放大，同時(shí)體積非常的小。Infographic用的是html5與CSS3技術(shù)，必須要現(xiàn)代瀏覽器支持，另外插件不能在本地直接打開(kāi)測(cè)試，請(qǐng)放到服務(wù)器環(huán)境下測(cè)試。
使用方法：
引入核心文件
1 2 3 | <link rel="stylesheet" type="text/css" href="css/interactive-svg.css" /><script src="js/modernizr.custom.js"></script><script src="http://ajax.useso.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> |
寫入HMTL
1 | <div id="stage"></div> |
寫入JS初始化插件
1 2 3 4 5 6 7 8 9 10 11 12 | $(function(){ $("#stage").load('interactive.svg',function(response){ $(this).addClass("svgLoaded"); if(!response){ // Error loading SVG $(this).html('請(qǐng)不要在本地直接打開(kāi)文件測(cè)試，因?yàn)镾VG需要服務(wù)器環(huán)境方可加載使用'); } });}); |
轉(zhuǎn)載請(qǐng)注明：jQ酷 ? 使用CSS動(dòng)畫與SVG創(chuàng)建信息圖插件Infographic
