jQueryマウスの位置を使用した水平スクロール

Question

私は、フラッシュ内のサイト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);