同じクラス名を持つ複数のdivのmousemove

同じクラス名で複数のdivにmousemoveを実行したいが、マウスの位置は各div内で再開されない。ここ同じクラス名を持つ複数のdivのmousemove

である私のコードです：

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

出典

2017-05-15 Ree.

.reference要素を別の要素で囲みます。そして、その位置をrelativeに設定します。また、e.pageXとe.pageYの代わりにe.offsetXとe.offsetYを使用してください。問題が解決したら解決します。

の作業例

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

出典

2017-05-15 12:17:35 azs06

backgroud-positionは、各.referenceに対して相対的である必要があるためです。最初のものは、最大で-500pxなので、うまくいきます。したがって、2番目には-1000pxなどがあります。

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

全コード：var xとvar y上

$(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'); 

    }); 
});

出典

2017-05-15 11:51:10 Leguest

あなたの数学が間違っているあなたはこれを行うことができます。 1.15によってあなたの守ることはe.pageYを下回るにつれて大きくなり、あなたの結果はますます大きくなります。それが正常に動作しdevidingなし

：

$(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'); 
    }); 
    }); 
});

そう結論：xとyのために使用する他の数学。

出典

2017-05-15 11:51:34

同じクラス名を持つ複数のdivのmousemove

答えて

関連する問題