Javascript 如何使用jQuery使DOM对象遵循循环路径？

我正在尝试使用jQuery使DOM对象遵循循环路径

到目前为止，我试图通过重新安排一个简单的公式来确定一个圆来找到路径，因此在伪代码中：

x=随便什么。 y=绝对值（sqrt（常数）-x）

这就是我到目前为止所做的：

$(window).on('scroll', function() 
{
    //get intitial ratio
    vRatio = (sky.dHeight - sky.height ) / (sky.height - 100)
    hRatio = (sky.dHeight - sky.height ) / (sky.width - 100)

    rawX = $(window).scrollTop() / hRatio;
    x = rawX - sky.width/2;
    y = Math.abs(Math.sqrt(sky.width/2) - x);

    console.log(x)
    console.log(y)

    sun.ob.css({left : rawX, top: y})
})

目前，它沿着一条三角形的路径，而不是我用眼睛寻找的柔和的环形流

---

只是为了提供一些上下文，这是一个视差样式的文档，其中高度是px-toll的000（因此是比率）。

如果您正在寻找一个圆形路径，那么您可能需要使用cos和sin；）

我举了一个太阳在一个叫做“天空”的div内旋转的例子：

我希望这是有帮助的：D

通常对于

（x，y）

一对圆，您需要使用

sin

和

cos

，因此

x = x0 + radius*Math.cos(angle)
y = y0 + radius*Math.sin(angle)

对于以

（x0，y0）

为中心且具有给定

半径的圆

看起来您可能希望从值

x

开始，然后确定

y

？为此，您可以使用：

angle = Math.acos( (x-x0)/radius )
y = y0 + radius*Math.sin(angle)

---

为您制作此小提琴-向下滚动时使用一些CSS旋转：

---

任何窗口大小都可以使用。

jfiddle在这里很方便，当我需要旋转一个圆时，我通常使用cos（）和sin（）函数。几乎！由于它被固定在滚动顶部位置，我讨厌地希望我的太阳只旋转半圈。我尝试过修改这段代码，并在scrollTop的基础上插入不同的进度值，但我的太阳仍然在地平线以下（屏幕底部）。回答得很好！但是由于浏览器的支持，我不得不远离CSS3属性。

angle = Math.acos( (x-x0)/radius )
y = y0 + radius*Math.sin(angle)

$(window).scroll(function () {
    var scrollAmount = $(window).scrollTop();
    var documentHeight = $(document).height() - $(window).height();
    var scrollPercent = (scrollAmount / documentHeight);
    var r = 180 * scrollPercent;
    TweenMax.to($('#orbit'), 0.5, {
        rotation: r
    });
});