Question

我对这个等式有些麻烦。

基本上，当光标在边缘的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
        });
    }

}

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

Answer 2

谢谢老兄！

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

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

2 个答案: