javascript - 如何改进这个 JS Parallax 类型的数学方程？

Question

我在这个方程上遇到了一些麻烦。

本质上，当光标位于边缘 200 像素范围内时，我希望画板(网格)div 将自身定位到浏览器的边缘。

这可以通过观察鼠标坐标来设置位置来轻松完成，但我希望它是流畅的。 IE。如果鼠标距左边缘 199 像素，则 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
        });
    }

}

Answer 1

当您将鼠标位置调整为所需的百分比时，我总是发现这样的方程更容易处理:

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);