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

Question

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

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

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

Можете ли вы направить меня на математическую часть?

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