我正在尝试使用 jQuery 使用 for 循环从一个对象生成 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)时,它的宽度和高度似乎增加了,但没有产生应有的结果。
最佳答案
您需要在循环外定义 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% 而不是像素值,并删除了不必要的边距和宽度/高度。
关于javascript - 使用 JavaScript/jQuery 创建同心圆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18686522/