2

这个问题将是我的死亡。我正在尝试使用 jquery 从头开始​​制作星空类型的动画。我的 jfiddle 的链接是http://jsfiddle.net/wompdesigns/jNBAk/4/。这给了我 12 个随机放置在屏幕上的小 div 就好了。在代码方面做动画我真的没有问题。我遇到的问题是从中心点 div（绿色）找到放置 div（红色）的目标点。换句话说，我想从放置的 div（红色）以与中心（绿色）相对应的角度到达父 div 的末尾。我希望这个问题是有道理的，并感谢任何试图解决这个问题的人。jquery代码如下：

$('.cs').each(function(index) {
    var posx = Math.ceil(Math.random() * (60-40+1)) + 40;
    var posy = Math.ceil(Math.random() * (60-40+1)) + 40;
    $(this).css({left: posx+"%", top: posy+"%", });
});
4

2 回答 2

1

想到的最快的解决方案（可能没有优化或最好）。

我会将您的任务分成几个子任务。例如：

A. define angle.

B. move from O to O'.

所以要定义角度，使绿色正方形成为坐标（0,0）的开始。

对于每个红点，您应该执行以下操作：

1. Define (x,y).
2. Get angle between (x,y) and (x,0). This would be the angle you need.

要从 O 移动到 O'，您将需要（嗯，它不是所说的：P）：

1. Define angle tangens.**(one time)**
2. For given x calculate y by evaluating linear equation **y=kx** .

此外，应该检查红点是否在父 div 的范围内。

于 2012-12-04T11:03:48.267 回答
0

也许您也应该将其发布在数学或几何 stach 交换站点上……无论如何，找到角度应该是简单的数学。我的方法是：

for each red dot
  Get the center of the red dot:
  X = $(this).position().left + $(this).width() / 2
  Y = $(this).position().top + $(this).heigh() / 2

Likewise, get the green dot center as well 
  Cx, Cy = something (it is not 0,0)

for each red dot,
  the angle is the arctan((Y-Cy)/(X-Cx))
  to make things simple:
    for every 1 (or -1 if X<Cx) pixel step horizontally
    make (Y-Cy)/(X-Cx) pixel steps vertically

对不起，丑陋的伪代码，你应该能够快速将其转换为 JS。您甚至不需要计算反正切值，只要您在适当的方向上踏入正确的数量即可。

让我知道它是否有效...

结果是这样的：http: //jsfiddle.net/jNBAk/7/

让它工作起来很有趣！:)

于 2012-12-04T11:18:02.507 回答