mousemove auf mehrere div mit demselben Klassennamen

Ich möchte eine Mausbewegung auf mehrere divs mit dem gleichen Klassennamen, aber die Mausposition ist nicht Neustart innerhalb jedes divs.mousemove auf mehrere div mit demselben Klassennamen

hier ist die demo

hier ist mein Code:

<body> 
<div class="reference" id="landing-content" style="background-image: url(http://www.samsung.com/fr/consumer/mobile-devices/smartphones/galaxy-s/galaxy-s7/gear-360/images/gear-360_slide360_02.jpg);"><section class="slider"></section></div> 
<div class="reference" id="landing-content" style="background-image: url(http://www.samsung.com/fr/consumer/mobile-devices/smartphones/galaxy-s/galaxy-s7/gear-360/images/gear-360_slide360_01.jpg);"><section class="slider"></section></div> 
<div class="reference" id="landing-content3"><section class="slider"></section></div> 
<div class="reference" id="landing-content4"><section class="slider"></section></div> 
<div class="reference" id="landing-content5"><section class="slider"></section></div> 
<div class="reference" id="landing-content6"><section class="slider"></section></div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
</body> 


$(document).ready(function(){ 
$('.reference').mousemove(function(e){ 
    var x = -(e.pageX + this.offsetLeft)/1.15; 
    var y = -(e.pageY + this.offsetTop)/1.15; 
    $(this).css('background-position', x + 'px ' + y + 'px'); 
    $(this).css('transition', 'background-position 1.5s ease-out'); 
}); 
});

Quelle

2017-05-15 Ree.

Umhüllen Sie Ihr .reference Element mit einem anderen Element. Und setzen Sie es auf relative. Verwenden Sie auch e.offsetX und e.offsetY anstelle von e.pageX und e.pageY. Dann wird das Problem gelöst, das Sie haben.

Arbeitsbeispiel

$(document).ready(function() { 
 
    $('.reference').mousemove(function(e) { 
 
    var x = -(e.offsetX + this.offsetLeft)/1.15; 
 
    var y = -(e.offsetY + this.offsetTop)/1.15; 
 
    $(this).css('background-position', x + 'px ' + y + 'px'); 
 
    $(this).css('transition', 'background-position 1.5s ease-out'); 
 
    }); 
 
});

.sliderBlock { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
#landing-content { 
 
    overflow: hidden; 
 
    width: 100%; 
 
    margin: 10px 0 0 0; 
 
    background-size: 190% 190%; 
 
    background-repeat: no-repeat; 
 
    max-height: 500px; 
 
} 
 

 
#landing-content3 { 
 
    overflow: hidden; 
 
    background-image: url(http://virtualtourpro.com.au/wp-content/uploads/2012/03/Kitchen-Dining-360.jpg); 
 
    width: 100%; 
 
    margin: 10px 0 0 0; 
 
    background-size: 190% 190%; 
 
    background-repeat: no-repeat; 
 
    max-height: 500px; 
 
} 
 

 
#landing-content4 { 
 
    overflow: hidden; 
 
    background-image: url(https://www.starkwoodmediagroup.com/assets/img/panorama/360-image.jpg); 
 
    width: 100%; 
 
    margin: 10px 0 0 0; 
 
    background-size: 190% 190%; 
 
    background-repeat: no-repeat; 
 
    max-height: 500px; 
 
} 
 

 
#landing-content5 { 
 
    overflow: hidden; 
 
    background-image: url(http://www.radschlag.at/wp-content/uploads/2016/01/Panorama-2.jpg); 
 
    width: 100%; 
 
    margin: 10px 0 0 0; 
 
    background-size: 190% 190%; 
 
    background-repeat: no-repeat; 
 
    max-height: 500px; 
 
} 
 

 
#landing-content6 { 
 
    overflow: hidden; 
 
    background-image: url(http://www.easypano.com/gallery/panoweaver/201112021732/panoramamic.jpg); 
 
    width: 100%; 
 
    margin: 10px 0 0 0; 
 
    background-size: 190% 190%; 
 
    background-repeat: no-repeat; 
 
    max-height: 500px; 
 
} 
 

 
.slider { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    overflow: hidden; 
 
    padding-top: 100%; 
 
    max-width: 1002px; 
 
}

<title>Parallax</title> 
 

 
<body> 
 
    <div class="sliderBlock"> 
 
    <div class="reference" id="landing-content" style="background-image: url(http://www.samsung.com/fr/consumer/mobile-devices/smartphones/galaxy-s/galaxy-s7/gear-360/images/gear-360_slide360_02.jpg);"> 
 
     <section class="slider"></section> 
 
    </div> 
 
    </div> 
 
    <div class="sliderBlock"> 
 
    <div class="reference" id="landing-content" style="background-image: url(http://www.samsung.com/fr/consumer/mobile-devices/smartphones/galaxy-s/galaxy-s7/gear-360/images/gear-360_slide360_01.jpg);"> 
 
     <section class="slider"></section> 
 
    </div> 
 
    </div> 
 
    <div class="sliderBlock"> 
 
    <div class="reference" id="landing-content3"> 
 
     <section class="slider"></section> 
 
    </div> 
 
    </div> 
 
    <div class="sliderBlock"> 
 
    <div class="reference" id="landing-content4"> 
 
     <section class="slider"></section> 
 
    </div> 
 
    </div> 
 
    <div class="sliderBlock"> 
 
    <div class="reference" id="landing-content5"> 
 
     <section class="slider"></section> 
 
    </div> 
 
    </div> 
 
    <div class="sliderBlock"> 
 
    <div class="reference" id="landing-content6"> 
 
     <section class="slider"></section> 
 
    </div> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
</body>

JSfiddle

Quelle

2017-05-15 12:17:35 azs06

Das ist, weil backgroud-position sollte für jeden .reference relativ sein. Das erste funktioniert gut, weil es maximal -500px ist. So zweitens wird -1000px und so weiter haben. Sie können dies tun:

var x = -(Math.abs(e.pageX - this.offsetLeft))/1.15; 
var y = -(Math.abs(e.pageY - this.offsetTop))/1.15;

Voll Code:

$(document).ready(function(){ 
    $('.reference').mousemove(function(e){ 

    var x = -(Math.abs(e.pageX - this.offsetLeft))/1.15; 
    var y = -(Math.abs(e.pageY - this.offsetTop))/1.15; 
    $(this).css('background-position', x + 'px ' + y + 'px'); 
    $(this).css('transition', 'background-position 1.5s ease-out'); 

    }); 
});

Quelle

2017-05-15 11:51:10 Leguest

Ihre Mathematik auf die var x und var y falsch sind. Wenn du auf dem e.pageY tiefer gehst, wirst du durch 1.15 größer und dein Ergebnis wird größer und größer.

ohne die deviding es funktioniert:

$(document).ready(function(){ 
    $('.reference').each(function(){ 
    $(this).mousemove(function(e){ 
    var x = -e.pageX + this.offsetLeft; 
    var y = -e.pageY + this.offsetTop; 
    console.log(e.pageX); 
    console.log(e.pageY); 
    $(this).css('background-position', x + 'px ' + y + 'px'); 
    $(this).css('transition', 'background-position 1.5s ease-out'); 
    }); 
    }); 
});

so Schlussfolgerung: Verwenden Sie andere Mathematik für x und y.

Quelle

2017-05-15 11:51:34

mousemove auf mehrere div mit demselben Klassennamen

Antwort

Verwandte Themen