jQuery使用鼠标位置进行水平滚动

Question

我正在尝试重新创建Flash中的网站http://www.zahia.com的javascript版本。

目前我已经完成了基本布局，这是一个包含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);