2

我正在尝试使用 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

4

2 回答 2

0

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

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

工作小提琴

编辑

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

angle += distance/radius;

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

distance -= 1.5;

您的其余代码几乎保持不变。

工作小提琴

于 2015-02-27T15:55:18.143 回答
0

您可以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/

于 2015-02-27T16:03:34.083 回答