jQuery Горизонтальная прокрутка с использованием положения мыши

Question

Я пытаюсь воссоздать javascript-версию сайта http://www.zahia.com, которая находится во флэш-памяти.

В настоящее время я уже подготовил базовый макет, представляющий собой простой горизонтальный контейнер, содержащий элементы div. Вы можете увидеть код здесь http://pastebin.com/U3z2aJve

Я думаю установить обработчик для события mousemove, но я не уверен, как выполнить математические вычисления за левой позицией контейнера относительно позиции x мыши для прокручиваемой части.

Можете ли вы руководить мной по математике?

Answer 1

Вам необходимо определить% возраста, по которому мышь переместилась по экрану, затем взять тот же% возраста ширины контейнера и переместить контейнер на это расстояние.

Например, предположим, что ширина экрана составляет 100 пикселей, а ширина контейнера - 300 пикселей. Для каждого пикселя мы перемещаем мышь от левого края экрана, нам нужно будет переместить контейнер на 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);