响应圈内圈

Question

我正在尝试创建一个响应圆圈，其中有一个内圈，就像在jsfiddle中一样。 如果我调整页面大小，我希望外圈和内圈自动调整。

我怎么能实现这种行为？

以下是我尝试的内容：http://jsfiddle.net/ineffablep/x03f61db/

代码：

function createFields() {
  $('.field').remove();
  var container = $('#container');
  for (var i = 0; i < +$('input:text').val() + 1; i++) {
    $('<div/>', {
      'class': 'field',
      'text': i
    }).appendTo(container);
  }
}

function distributeFields() {


  var fields = $('.field'),
    container = $('#container'),
    width = center.width() * 2,
    height = center.height() * 2,
    angle = 0,
    step = (2 * Math.PI) / fields.length;
  var radius = width / 2;
  var containerLength = $('input:text').val();
  angle = step * (containerLength - 1);

  fields.each(function() {

    var x = Math.round(width + radius * Math.cos(angle));
    var y = Math.round(height + radius * Math.sin(angle));
    $(this).css({
      right: x + 'px',
      top: y + 'px'
    });
    angle -= step;

  });
}
var center = $('#center');

$(window).resize(function(height) {

  $('#container').width($(window).height() * 0.9)
  $('#container').height($(window).height() * 0.9)
  var width = $('#container').width() * 0.4;
  console.log("width", $('#container').width());
  console.log("height", $('#container').height());
  var radius = width / 2;
  width += 'px';
  radius += 'px';
  center.css({
    width: width,
    height: width,
    '-moz-border-radius': radius,
    '-webkit-border-radius': radius,
    'border-radius': radius
  });

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

$(window).resize();


$('input').change(function() {
  createFields();
  distributeFields();
});

body {
  padding: 2em;
}
#center {
  position: absolute;
  background: #00A8D9;
  width: 50%;
  height: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 3px solid #000;
  top: 55%;
  left: 27%;
}
.field {
  width: 20px;
  height: 20px;
  position: absolute;
  color: #f00;
}

Number of fields:
<input type="text" value="60" />
<div id="container">
  <div id="center"></div>

</div>

Answer 1

以下是关于如何处理此问题的exemple。

我首先要做的是为#container添加css规则：

#container{
    position:relative;
    float:right;
}

然后，我为top元素编辑了left和#center CSS值，并添加了box-sizing属性（以防止border崩溃{{1行为）：

width

我发现字段圆圈的中心位于#center { position:absolute; background: #00A8D9; width: 50%; height: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border:3px solid #000; top:100%; left:0%; box-sizing:border-box; } 的左下角，因此我为#container元素重现了这种行为。这就是它定位#center和top:100%的原因，但为了准确定位在左下角，我需要添加负边距（left:0%尺寸的一半），这取决于#center大小：

#container

PS：我发现您的字段圆圈的中心位于$(window).resize(function(height) { $('#container').width($(window).height()*0.9); $('#container').height($(window).height()*0.9); var width = $('#container').width() * 0.4; var radius = width; var topPos = (width/2)*(-1.2); var rightPos = (width/2)*(-1.2); radius += 'px'; topPos+="px"; rightPos+="px"; $('#center').css({ left:'0%', top: '100%', 'margin-top':topPos, 'margin-left':rightPos, '-moz-border-radius' : radius, '-webkit-border-radius' : radius, 'border-radius' : radius }); createFields(); distributeFields(); // rest of your code for font-size setting etc.. }); |的左下角处理一些像素的情况并非如此。你定位田地的方式可能会导致这个小差距。您只需找到一种方法来使用与定位字段相同的逻辑来调整边距

Answer 2

您可以尝试使用SCSS。您只需要创建一个变量。

$width: calc(100vw / 5);
.circle {
  width: $width;
  height: $width;
  background: red;
  border-radius: 50%;
  float: left;
  margin: 5px;
}

<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

Please see the fiddle