编写扇形插件

不解释了自己看吧.

直接上代码.

*{
                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+";width:"+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='width:"+opts.bigRadius+"px;height:"+opts.bigRadius+"px;background-color:"+opts.ringColor+";z-index=1;'></div>";
                        html+="<div class='pie-square' ring='n' style='width:"+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='width:"+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())
                });
            }