jQuery水平滚动使用鼠标位置

Question

我试图重新创建一个JavaScript版本的网站http://www.zahia.com这是在闪存。

目前我已经完成了基本的布局，这是一个简单的包含div的水平容器。你可以看到这里的代码http://pastebin.com/U3z2aJve

我在想为mousemove事件设置一个处理程序，但我不确定如何在容器的左侧位置相对于鼠标的滚动部分的x位置进行数学运算。

你能指导我的数学部分？

Answer 1

您需要计算出鼠标在屏幕上移动的百分比，然后采用与容器宽度相同的百分比，并移动距离的容器。

例如，假设屏幕宽度为100px，容器宽度为300px。 对于我们从屏幕左边缘移动鼠标的每个像素，我们需要将容器向左移动3个像素。

这样，容器将完全离开屏幕的左边缘，所以我们需要调整屏幕的宽度。所以我们结束了下面的伪代码。

var range = containerWidth - screenWidth; // 200px 

// assume the mouse is at 10px from left 
var dx = mousePercentageFromLeftEdgeOfScreen(); // dx = 0.1; 
var movement = range * dx; // movement = 200 * 0.1 = 20px 

// move the container to the left, hence the negative value 
setContainerPosition(-movement);