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