不解释了自己看吧.
直接上代码.
*{ margin: 0; padding: 0; } .pie-box{ position: relative; overflow: hidden; } .pie-box-inside{ position: absolute; left: 50%; top: 50%; z-index: 3; } .pie-square{ z-index: 1; position: absolute; left: 50%; top: 50%; -moz-transform-origin: 0 0; -webkit-transform-origin:0 0; -o-transform-origin:0 0; }
html代码:
<div id="test"></div> <button onclick="draw()">画图</button> <p>大圆半径:<input id="bigRadius" type="text" value="" /></p> <p>小圆半径:<input id="smallRadius" type="text" value="" /></p> <p>百分比:<input id="deg" type="text" value="" /></p>
插件js代码:
(function($){ var defaults={ bigBg:"red",//大圆背景 bigRadius:50,//大圆半径 ringColor:"yellow",//环背景 smallBg:"white",//小圆背景 smallRadius:40,//小圆半径 deg:-0.9 //扇形百分比,自动转换成度数 }; function html(opts){ var html=""; html+="<div class='pie-box-inside' style='background-color:"+opts.smallBg+";"+opts.smallRadius*2+"px;height:"+opts.smallRadius*2+"px;border-radius:"+opts.smallRadius+"px;margin-left:-"+opts.smallRadius+"px;margin-top:-"+opts.smallRadius+"px' >"; html+="</div>"; var absDeg=Math.abs(opts.deg); if( absDeg<90){ html+="<div class='pie-square' ring='y' style='"+opts.bigRadius+"px;height:"+opts.bigRadius+"px;background-color:"+opts.ringColor+";z-index=1;'></div>"; html+="<div class='pie-square' ring='n' style='"+opts.bigRadius+"px;height:"+opts.bigRadius+"px;background-color:"+opts.bigBg+";z-index=2'></div>" }else{ var squarCount=Math.ceil(absDeg/90); for(var i=0;i<squarCount;i++){ html+="<div class='pie-square' style='"+opts.bigRadius+"px;height:"+opts.bigRadius+"px;background-color:"+opts.ringColor+"'></div>" } } return html; } $.fn.pie=function(opts){ opts=$.extend({},defaults,opts); if(opts.bigRadius<opts.smallRadius){ alert("小圆的半径比大圆半径还大.插件不干了"); return; } opts.deg=opts.deg*360; this.each(function(){ var obj=$(this); obj.css({ "background-color":opts.bigBg, "width":opts.bigRadius*2, "height":opts.bigRadius*2, "border-radius":opts.bigRadius }).addClass("pie-box"); if(Math.abs(opts.deg)>360){ opts.deg=opts.deg%360; } obj.append(html(opts)); var absDeg=Math.abs(opts.deg); var objSquares=$(".pie-square",obj); var rotateDeg=0; if(absDeg<90){ if(opts.deg>0){ $(".pie-square[ring=y]",obj).css({"transform":"rotate(0deg)","-webkit-transform":"rotate(0deg)"}); $(".pie-square[ring=n]",obj).css({"transform":"rotate("+opts.deg+"deg)","-webkit-transform":"rotate("+opts.deg+"deg)"}); }else{ $(".pie-square[ring=y]",obj).css({"transform":"rotate(-90deg)","-webkit-transform":"rotate(-90deg)"}); rotateDeg=absDeg+90; $(".pie-square[ring=n]",obj).css({"transform":"rotate(-"+rotateDeg+"deg)","-webkit-transform":"rotate(-"+rotateDeg+"deg)"}); } } else if(absDeg==90){ if(opts.deg>0){ objSquares.css({"transform":"rotate(0deg)","-webkit-transform":"rotate(0deg)"}); }else{ objSquares.css({"transform":"rotate(-90deg)","-webkit-transform":"rotate(-90deg)"}); } } else if(absDeg>90&&absDeg<=180){ if(opts.deg>0){ objSquares.eq(0).css({"transform":"rotate(0deg)","-webkit-transform":"rotate(0deg)"}); rotateDeg=absDeg-90; objSquares.eq(1).css({"transform":"rotate("+rotateDeg+"deg)","-webkit-transform":"rotate("+rotateDeg+"deg)"}); }else{ objSquares.eq(0).css({"transform":"rotate(-90deg)","-webkit-transform":"rotate(-90deg)"}); objSquares.eq(1).css({"transform":"rotate("+opts.deg+"deg)","-webkit-transform":"rotate("+opts.deg+"deg)"}); } } else if(absDeg>180&&absDeg<=270){ if(opts.deg>0){ objSquares.eq(0).css({"transform":"rotate(0deg)","-webkit-transform":"rotate(0deg)"}); objSquares.eq(1).css({"transform":"rotate(90deg)","-webkit-transform":"rotate(90deg)"}); rotateDeg=absDeg-90; objSquares.eq(2).css({"transform":"rotate("+rotateDeg+"deg)","-webkit-transform":"rotate("+rotateDeg+"deg)"}); }else{ objSquares.eq(0).css({"transform":"rotate(-90deg)","-webkit-transform":"rotate(-90deg)"}); objSquares.eq(1).css({"transform":"rotate(-180deg)","-webkit-transform":"rotate(-180deg)"}); objSquares.eq(2).css({"transform":"rotate("+opts.deg+"deg)","-webkit-transform":"rotate("+opts.deg+"deg)"}); } } else if(absDeg>270&&absDeg<=360){ if(opts.deg>0){ objSquares.eq(0).css({"transform":"rotate(0deg)","-webkit-transform":"rotate(0deg)"}); objSquares.eq(1).css({"transform":"rotate(90deg)","-webkit-transform":"rotate(90deg)"}); objSquares.eq(2).css({"transform":"rotate(180deg)","-webkit-transform":"rotate(180deg)"}); rotateDeg=absDeg-90; objSquares.eq(3).css({"transform":"rotate("+rotateDeg+"deg)","-webkit-transform":"rotate("+rotateDeg+"deg)"}); }else{ objSquares.eq(0).css({"transform":"rotate(-90deg)","-webkit-transform":"rotate(-90deg)"}); objSquares.eq(1).css({"transform":"rotate(-180deg)","-webkit-transform":"rotate(-180deg)"}); objSquares.eq(2).css({"transform":"rotate(-270deg)","-webkit-transform":"rotate(-270deg)"}); objSquares.eq(3).css({"transform":"rotate("+opts.deg+"deg)","-webkit-transform":"rotate("+opts.deg+"deg)"}); } } }); } })(jQuery);
插件调用:
function draw(){ $("#test").html('<div class="box"></div>'); $(".box").pie({ bigBg:"red",//大圆背景 bigRadius:Number($("#bigRadius").val()),//大圆半径 ringColor:"yellow",//环背景 smallBg:"white",//小圆背景 smallRadius:Number($("#smallRadius").val()),//小圆半径 deg:Number($("#deg").val()) }); }