如何改進這個JS Parallax類型的數學方程？

我在這個方程中遇到了一些麻煩。如何改進這個JS Parallax類型的數學方程？

本質上，當光標在邊緣200px內時，我想讓畫板（網格）div將自己定位到瀏覽器的邊緣。

這可以很容易地通過觀察鼠標座標設置位置來完成，但我希望它是流暢的。 I.E.如果鼠標距離左邊緣爲199px，那麼lVal應緩慢遞減，直到畫板對象邊緣與鍍鉻邊緣內嵌。

目前，我有這個工作的左邊緣，但我無法弄清楚如何做到這一點，而不會造成輕微的流行。

請查看下面的示例。

http://dev.nimmbl.com/sampler/#

winSize[] = document window size (y,x) 

2940 = width of artboard object 


    function moveArtboard(e){  

    var t = docbody.offset(), space = 400, lVal, tVal; 

    lVal = Math.round((space/2) + (e.pageX - t.left) * (winSize[1] - (2940 + space))/winSize[1]); 
    tVal = Math.round((space/2) + (e.pageY - t.top) * (winSize[0] - (1200 + space))/winSize[0]); 

    if(lVal >= 0){ 
     artboard.obj.css({ 
      "left": 0, 
      "top": tVal 
     }); 
    } else if(lVal + -winSize[1] <= -2940){ 
     artboard.obj.css({ 
      "left": "auto", 
      "right": 0, 
      "top": tVal 
     }); 
    } else { 
     artboard.obj.css({ 
      "left": lVal, 
      "top": tVal 
     }); 
    } 

}

來源

2011-04-07 chris

我覺得它是這樣的。有一個看不見的框架，坐落在窗口內，勝率爲80％。框架應居中，框架和邊緣之間的距離是應該用作乘數的值。我的目標是顯示左側或最右側的框，而不需要用戶一直滾動到瀏覽器鑲邊的邊緣。 – chris 2011-04-07 18:03:28

我總是發現這樣的公式比較容易處理，當你調節鼠標位置成爲你想要什麼％：

var percent = Math.min(1, Math.max(0, e.pageX - 200)/(winSize[1] - 400)); 
var lVal = -percent * (2940 - winSize[1]); 
var tVal = Math.round((space/2) + (e.pageY - t.top) * (winSize[0] - (1200 + space))/winSize[0]); 

artboard.obj.css({ 
    left : lVal, 
    top : tVal 
});

兩個Math功能是靠近邊緣時保持0-1的值。 percent現在是一個從0-1開始的數字，只是乘以你需要處理的很多空間。

我很確定這是正確的，讓我知道如果它不完美，還沒有測試過。

我也有一個Math.constrain功能我寫了這樣的情況：

Math.constrain = function(num, min, max){ 
    return num < min ? min : num > max ? max : num; 
} 

var percent = Math.constrain((e.pageX - 200)/(winSize[1] - 400), 0, 1);

來源

2011-04-07 18:18:22

對不起，數學不是我的強項，我一直在爲此修改幾天。我將如何在我的當前腳本中使用它？ – chris 2011-04-07 18:54:11

編輯我的答案，只是嘗試更換大部分代碼與我的代碼 – 2011-04-07 18:55:45

第一塊工作就像一個魅力（在'VAR T = ...'行後）！謝謝！！！！那麼，這個工作到底如何？ HAHAH – chris 2011-04-07 19:00:01

感謝夥計！

function moveArtboard(e) 
{ 
var t = docbody.offset(), 
    space = 400, 
    percent = Math.min(1, Math.max(0, e.pageX - (space/2))/(winSize[1] - space)), 
    vPercent = Math.min(1, Math.max(0, e.pageY - (space/2))/(winSize[0] - space)), 
    lVal = -percent * (2940 - winSize[1]), 
    tVal = -vPercent * (1200 - winSize[0]); 

artboard.obj.css({ 
    left : lVal, 
    top : tVal 
}); 
}

來源

2011-04-07 19:11:53 user697409

如何改進這個JS Parallax類型的數學方程？

回答

相關問題