3

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

目前，它正在沿着三角形路径而不是我用眼睛寻找的柔和的圆形流动。

只是为了给出一些上下文，这是在视差样式文档上，其中高度是 000 像素高（因此是比率）。

4

3 回答 3

4

为您制作了这个小提琴 - 向下滚动时使用了一些 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
    });
});

应该适用于任何窗口大小。

于 2013-08-27T20:24:27.143 回答
2

如果您正在寻找圆形路径，那么您可能想要使用 cos 和 sin ;)

我制作了一个太阳在名为“sky”的 div 中旋转的快速示例： jsfiddle 示例

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

于 2013-08-27T19:09:08.160 回答
2

通常对于(x,y)你需要使用的成对的圆圈sinand 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)
于 2013-08-27T19:09:41.137 回答