Bewegliches Hintergrundbild mit Maus -CSS und JS - Mehrere horizontale gestapelte DIVs

Question

Hallo, brauche etwas Hilfe beim Stapeln von mehreren div Tags innerhalb einzelner Container div horizontal. Jeder mit seinem eigenen scrollbaren BKG-Bild. Der Code mit einigen einfachen CSS funktioniert gut für die erste Div. Prob ist, dass ich andere Divs auf der rechten Seite nicht richtig bewegen kann. Das BKG-Bild bewegt sich vom Bildschirm und überall hin. CSS verwendet Inline-Block. Die Divs sind gut stapelbar, bewegen sich gut mit Änderungen des Browsers.

$(".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

dass, da das Maus-Ereignis ist und Attribut pageXpageY von der Kante der gesamten Seite berechnet werden. Sie müssen den Versatz des 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 + '%'); 

}) 

reduce Hier ist jsfiddle link.

Hoffe, das ist, was Sie brauchen.

aktualisieren

hinzufügen mouseleave Ereignis-Listener Hintergrund Bildposition zurückzustellen.