Question

我想在具有相同类名的多个div上进行鼠标移动，但鼠标位置不会在每个div内重新启动。

这是我的代码：

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

Answer 1

那是因为backgroud-position应该是每个.reference的相对值。第一个工作正常，因为它的最大-500px。所以第二个将有-1000px，依此类推。你可以这样做：

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

完整代码：

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

  });
});

Answer 2

您对var x和var y的数学错误。当你在e.pageY上越来越低时，你的1.15越过越大，你的结果会变得越来越大。

没有设置它可以正常工作：

$(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使用其他数学。

Answer 3

用另一个元素包裹你的.reference元素。并将其设置为relative。同时使用e.offsetX和e.offsetY代替e.pageX和e.pageY。然后您的问题将得到解决。

工作示例

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

JSfiddle

mousemove在具有相同类名的多个div上

3 个答案: