Jquery 使用边界半径绘制圆_Jquery_Css

Jquery 使用边界半径绘制圆

jquery css

Jquery 使用边界半径绘制圆,jquery,css,Jquery,Css,我试图用边界半径转换一些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-radiu

我试图用边界半径转换一些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中，我使用javascript/jQuery根据每个div的大小更改每个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');  
                });

这就是我在chrome Ripple extension中看到的情况：

你能帮我解释一下，div总是圆的，而不是蛋吗？ 提前感谢，丹尼尔要画一个圆圈：

HTML

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

是上面的提琴

固定宽度和高度：

圆圈

包含在

div

中，以便%的宽度和高度正常工作：

来源：

工作演示：

该演示通过使用窗口对象的resize事件而不是div本身来工作。在每次调整大小时，我们调整div及其边界半径的大小，使其呈现为一个完美的圆（即宽度=高度，半径=宽度/2）

代码：

JQuery 这也很有用，如果你把所有这些代码复制到你的站点上，它就会工作。或者您可以看到演示：

调用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函数-tak作为参数id/类html属性、大小（以px为单位）、填充百分比和馅饼颜色

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


函数drawPie（id、大小、百分比、颜色）{
var sizeString=“”+大小+“px”；
var梯度=360/100*百分之+90；
控制台日志（梯度）；
变量派=$（“”）；
css（{“宽度”：sizeString，
“高度”：尺寸限制，
“显示”：“块”，
“边界半径”：“50%”，
“背景色”：颜色，
“浮动”：“左”，
“边距”：“5px”
});         
如果（百分比=100）{
css（{“背景图像”：“无”}）；
}否则{
css（{“背景图像”：“线性梯度（“+（梯度+180）+”度，透明50%，“+颜色+”50%），线性梯度（+90度，白色50%，透明50%）”）；
}
$（id）.追加（饼图）；
}

对于“展示周期”，其工作原理：

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

    </script>       

    </body>

</html>

用于（i=0；我能做一个JSFIDLE吗？因为你在任何地方都使用百分比，形状可能会根据窗口大小而变化。这是上面信息中的一个例子。是的，为了适应不同的分辨率，我需要使用百分比。你需要一个方形的外部容器。但是怎么做呢？我不知道怎么做。是的，但我需要percents。谢谢你的朋友。除非你把百分比放在一个div中，否则你不能用它，因为浏览器窗口的高度和宽度是不同的。所以，它们的百分比也会不同。那么，我怎样才能在不同分辨率的屏幕上画圆并很好地定位它们呢？你有什么建议吗？谢谢你的帮助只需使用margin:0 auto；来定位它在中间。看EddioOK，明天我到达办公室时，我会努力使用媒体查询，使这些div适应不同的解决方案。当我有问题时，我会来这里哈哈。RegardsWow！我将测试它！谢谢请添加解释，说明是什么让您认为您的代码适用于OP。这将有助于所有观众了解为什么这是一个解决方案
    <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>