Question

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

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

x =无论如何。 y = abs（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高的000（因此比率）。

Answer 1

为你制作这个小提琴 - 在向下滚动时使用一些CSS旋转：

http://jsfiddle.net/cWqKL/3/

$(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
    });
});

应适用于任何窗口大小。

Answer 2

如果你正在寻找循环路径，那么你可能想要使用cos和sin;）

我做了一个快速的例子，说明在一个名为“天空”的div中旋转的太阳： jsfiddle example

var progression = 0;
update();
function update(){

    var radiusX = 200;
    var radiusY = 100;
    var speed = 0.01;

    var sky = $("#sky");
    var sun = $("#sun");

    var skyCenterX = sky.width() * 0.5 - sun.width() * 0.5;
    var skyCenterY = sky.height() * 0.5 - sun.height() * 0.5;

    progression = progression + speed;

    var sunX = skyCenterX + radiusX * Math.cos(progression);
    var sunY = skyCenterY + radiusY * Math.sin(progression);

    $("#sun").css({left : sunX, top: sunY});

    setTimeout(function(){update();}, 10);
}

我希望这有用：D

Answer 3

一般来说，对于(x,y)个圆圈，您需要使用sin和cos，所以类似

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

表示以(x0,y0)为中心的圆圈，其中包含radius。

看起来您可能希望以x的值开头，然后确定y？为此您可以使用：

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

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

3 个答案: