マウスを使って背景画像を移動する-CSSとJS - 複数の水平積み重ねDIV

Question

こんにちは、複数のdivタグを1つのコンテナdiv内に水平に積み重ねる助けが必要です。それぞれ独自のスクロール可能なBKGイメージを備えています。いくつかのシンプルなCSSに添付されたコードは、1番目のdivに最適です。 Probは正しく移動するために他のdivを右に取得できません。 BKG画像は、画面から離れて移動します。 CSSはインラインブロックを使用しています。 Divsはうまく積み重なり、ブラウザのサイズ変更にうまく対応します。マウスイベントがpageXとpageYは、ページ全体のエッジから計算されている属性があるためである

$(".download_content_02").mousemove(function(event) { 

var containerWidth = $(this).innerWidth(), 
    containerHeight = $(this).innerHeight(), 
    mousePositionX = (event.pageX/containerWidth) * 100, 
    mousePositionY = (event.pageY /containerHeight) * 100; 

$(this).css('background-position', mousePositionX + '%' + ' ' + mousePositionY + '%'); 

}); 

Answer 1

。あなたはここにjsfiddle linkがあるdiv.download_content_02

$(".download_content_02").mousemove(function(event) { 
    var containerWidth = $(this).innerWidth(), 
    containerHeight = $(this).innerHeight(), 
    containerOffsetLeft = $(this).offset().left, // container left offset 
    containerOffsetTop = $(this).offset().top, // container top offset 
    mousePositionX = ((event.pageX - containerOffsetLeft)/containerWidth) * 100, 
    mousePositionY = ((event.pageY - containerOffsetTop)/containerHeight) * 100; 

    $(this).css('background-position', mousePositionX + '%' + ' ' + mousePositionY + '%'); 

}) 

のオフセットを減らす必要があります。

希望が必要です。

更新

背景画像の位置をリセットするためにmouseleaveイベントリスナーを追加します。