3

境界線の半径を使用して、いくつかの div を変換しようとしています。私はほとんどそれを取得しますが、div が「卵」のように見えることがあります (笑) これは私の css です:

#div{   /*div central*/
    position:absolute;
    top:50%;
    margin-top: -20%;
    left:50%;
    margin-left: -20%;
    background: #00A8D9;
    width: 40%;
    height: 40%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border:3px solid #000;
}
#divSupIzq,#divSupDer,#divInfIzq,#divInfDer{    /*DIVs: left-top , right-top, left-bottom, right-bottom*/
    background: #ddd;
    width: 20%;
    height: 20%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border:3px solid #fff;
    position:absolute;
}
#divSupIzq{  /*Div left-top*/
    top:15%;
    left:10%;
}
#divSupDer{ /*Div right-top*/
    top:15%;
    right:10%;
}
#divInfIzq{ /*Div left-bottom*/
    bottom:15%;
    left:10%;
}
#divInfDer{ /*Div right-bottom*/
    bottom:15%;
    right:10%;
}

そしてhtmlでは、各divのコンテンツを変更するためにjavascript / jQueryを使用します（基本的に、divのテキスト：左上、右上、左下、右下、および中央のdivの番号）。各divのサイズ:

$('#div').resize(function(height){
                    var fuente = $(this).height()/2;
                    var margen = (fuente / 2)-5;
                    $('.contenido').css('font-size',fuente+'px');
                    $('.contenido').css('margin-top',margen+'px');  
                });

これは、クロムのリップル拡張でどのように表示されるかです: https://www.dropbox.com/s/k71kz5lahfolw95/screen.JPG

div が常に卵ではなく円になるように、私を助けてくれませんか? 前もって感謝します、ダニエル

4

3 に答える 3

9

円を描くには:

HTML

<div id="circle"></div>

CSS

#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

これが上記のフィドルです。

固定幅と高さ: http://jsfiddle.net/eC3jq/1/

circlediv% 幅と高さが適切に機能するように a に含まれています: http://jsfiddle.net/eC3jq/2/

出典：CSS-トリック

于 2012-07-12T15:45:57.147 に答える
1

JQuery

これも便利です。このコードをすべてサイトにコピーすると機能します。または、デモを見ることができます:

https://jsfiddle.net/whLctrp4/

JQuery 関数を呼び出す HTML コード:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <link rel="stylesheet" type="text/css" href="style.css">

    </head>
    <body>

    <div class="pies">
    </div>

JQuery を含める

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

drawPie 関数 - パラメータとして id/class html 属性、サイズ (ピクセル単位)、塗りつぶしの割合、パイの色を指定します。

    <script>

    function drawPie (id, size, percent, color) {                               
        var sizeString = "" + size + "px";                      
        var grad = 360/100*percent+90;      
        console.log(grad);
        var pie = $("<span></span>");

        pie.css({"width": sizeString, 
            "height": sizeString,               
            "display": "block",
            "border-radius": "50%",
            "background-color": color,                          
            "float": "left",
            "margin": "5px"             
        });         

        if(percent <= 50){
            pie.css({"background-image": "linear-gradient("+ grad + "deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%)"});
        } else if (percent >= 100) {
            pie.css({"background-image": "none"});
        } else {                                
            pie.css({"background-image": "linear-gradient("+ (grad+180) + "deg, transparent 50%, "+color+" 50%), linear-gradient(+90deg, white 50%, transparent 50%)"});                
        }

        $(id).append(pie);
    }

サイクル フォー ショーの仕組みについては、次のとおりです。

    for(i=0; i<=100; i+=1){
        drawPie(".pies", 100, i, "orange");
    }

    </script>       

    </body>

</html>
于 2016-06-01T18:54:00.020 に答える
0

実際のデモ: http://jsfiddle.net/XtTkG/3/

デモは、div 自体ではなく、ウィンドウ オブジェクトのサイズ変更イベントを利用することによって機能します。サイズ変更ごとに、div とその境界線の半径のサイズを変更して、完全な円としてレンダリングします (つまり、幅 = 高さ、半径 = 幅/2)。

コード：

$(window).resize(function(height) {
    var div = $('#div');
    var width = $('body').width() * 0.4;
    var radius = width/2;
    width += 'px';
    radius += 'px';
    div.css({
        width: width, height: width,
        '-moz-border-radius' : radius,
        '-webkit-border-radius' : radius,
        'border-radius' : radius
    });

    // rest of your code for font-size setting etc..
});

$(window).resize();
于 2012-07-12T15:59:42.293 に答える