Question

我正在尝试使用jquery从div中绘制螺旋。到目前为止，我已经做了一个常规螺旋，似乎对我来说很好。然而，下一步是我需要它在div开始时之间有很大的距离，而在它开始时则较小。我知道我应该添加一个额外的变量来执行此操作，但我不知道如何实现它。

到目前为止，这是我的代码

var radius = 50;
var x0 = 300;
var y0 = 300;
var segment = 50;
var angle = 0;    

for (var i=0; i<=segment; i++){
  angle = angle + (Math.PI * 2) / 30;
  var x=x0+radius*Math.sin(angle);
  var y=y0+radius*Math.cos(angle);
  $("#terrain").append("<div class='drag' style='top:"+ y +"px;left:"+ x +"px;'></div>")
  radius = radius + 5;   
}

jsfiddle

Answer 1

您可以使每个div的大小成为半径的函数。七分之一似乎运作良好：

size = radius/7;
$("#terrain")
  .append("<div class='drag' style='top:"+ y +"px;left:"+x+
          "px;width:"+size+"px;height:"+size+"px;'></div>"
         );

<强> Working Fiddle

<小时/> 的修改

根据我们的评论，我现在更好地理解了这个问题。你可以声明一个distance变量，它是div之间的距离。然后angle将更新为：

angle += distance/radius;

每次循环，距离都会减小，如下所示：

distance -= 1.5;

其余代码几乎保持不变。

Working Fiddle

Answer 2

您可以使用transform:scale()进行大小调整

var newitem = $('<div>',{
    'class': 'drag',
    css:{
        top:y,
        left:x,
        transform: 'scale('+ scale +')'
    }
});
$("#terrain").append(newitem);

scale += 0.02;

当使用它时，您应该将转换的原点设置在中心（CSS上的）。

transform-origin: 50% 50%;

http://jsfiddle.net/v7avLbej/7/

演示

使用jquery绘制螺旋 - 点距离

2 个答案: