如何讓一個DOM對象跟隨jQuery的循環路徑？

我想使一個DOM對象遵循jQuery的循環路徑。如何讓一個DOM對象跟隨jQuery的循環路徑？

到目前爲止，我試圖通過重新排列一個簡單的公式來找到路徑，確定了一圈，所以在僞代碼：

X =什麼的。 Y = ABS（開方（常量）-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（因此是比率）。

來源

2013-08-27 Jake Whiteley

一個jfiddle在這裏很方便+當我需要在圓圈中旋轉的東西時，我通常使用cos（）和sin（）函數。 –

提出這一搗鼓你 - 使用一些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-27 20:24:27 brutzel

精彩回答！但由於瀏覽器支持，我必須遠離CSS3屬性。 –

如果你正在尋找一個圓形路徑，那麼你可能想使用COS和罪惡。）

我做了一個名爲「天空」專區內旋轉太陽的一個簡單的例子： 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

來源

2013-08-27 19:09:08

差不多！由於它與scrollTop位置綁定，所以我煩惱地希望我的太陽只能完成半個旋轉。我已經嘗試修改這段代碼，並且根據scrollTop插入了不同的進度值，但是我的太陽仍然在'地平線下'（屏幕底部）。 –

一般爲(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)

來源

2013-08-27 19:09:41 tom10

如何讓一個DOM對象跟隨jQuery的循環路徑？

回答

相關問題