2

jquery を使用して div からスパイラルを描画しようとしています。私はこれまで通常のスパイラルを行ってきましたが、うまく機能しているようです。ただし、次のステップは、開始時に 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

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 に答える