如何改进这个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类型的数学方程？

回答

相关问题