3

我正在尝试使用 for 循环使用 jQuery 从一个对象生成 10 个同心圆。

我已经在我的 jsfiddle http://jsfiddle.net/JoshuaWaheed/NJkda/2/中写了这个，它看起来像这样：

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

for(var count = 0; count < 20; count++){
  var ten = 10;
  ten = ten + 30;
  $(".circle").css({"width":ten+"px","height":ten+"px"});
};

我怎样才能做到这一点？当我将变量添加任意数字（例如 30）时，宽度和高度似乎会增加，但并没有带来应有的结果。

4

4 回答 4

3

首先，将变量声明移到循环之外。其次，将border-radius值设置为 50%。最后，为每个圆圈创建一个新元素。您的代码重新访问：

/** 
 * css radius:
 *  -webkit-border-radius: 50%;
 *  -moz-border-radius: 50%;
 *  border-radius: 50%;
 */
var ten = 10;
for(var count = 0; count < 20; count++){
   ten = ten + 10;
   var c = $('<div class="circle"></div>').appendTo('body');
   c.css({"width":ten+"px","height":ten+"px"});
};

修改过的jsFiddle

于 2013-09-08T17:36:26.993 回答
3

您需要ten在循环外定义变量并为每个环创建一个新元素。

例如，

var ten = 10;
var tgt = $('body');
for(var count = 0; count < 20; count++){
    ten += 30;
    tgt.append('<div class="circle" style="width:'+ten+'px;height:'+ten+'px;margin:-'+(ten/2)+'px 0 0 -'+(ten/2)+'px"></div>');
};

请注意，我还在 javascript 中定义了边距，因为它也需要更改。

你的 CSS 也需要做些小改动；

.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 3px solid #666666;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

我已将边框半径设置为 100% 而不是像素值，并删除了边距和宽度/高度，这是不必要的。

于 2013-09-08T17:29:52.467 回答
2

首先，您将在每个 for 循环中重复修改您唯一的现有圈子。

其次，每次迭代都将高度和宽度设置为 40 像素。

第三，您可能希望使用 SVG 图形，它为此类内容提供本机支持。以下是 SVG 的示例：

http://jsfiddle.net/5c6zy/1/

//HTML
<svg id='circles' xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>

//Javascript
var centerX = 250;
var centerY = 250;

for(var count = 0; count < 20; count++){
    var radius = count * 10;
    makeAndPlaceCircle(radius);
};

function makeAndPlaceCircle(r){
  // thx m93a: http://stackoverflow.com/a/16489845/1380669
  var circles = document.getElementById('circles'); //Get svg element
  var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'circle'); 
  newElement.setAttribute("cx", centerX);
  newElement.setAttribute("cy", centerY);
  newElement.setAttribute("r", r);
  newElement.style.stroke = "#000"; //Set stroke colour
  newElement.style.strokeWidth = "2px"; //Set stroke width
  newElement.style.fill = "none"; //Set stroke colour
  circles.appendChild(newElement);
};

//No CSS required, but you can define CSS classes and set them on the SVG circle elements, if you would like to e.g. change stroke, fill
于 2013-09-08T17:27:09.733 回答
2

我的例子可能很有趣http://jsfiddle.net/gxM84/2/

var n=5; //set number of circles

在这里增加半径

padding: 15px;
于 2013-09-08T18:11:59.110 回答