文章/答案/技术大牛

发布

社区首页 >问答首页 >同一个类名的多个div上的mousemove

问同一个类名的多个div上的mousemove
EN

Stack Overflow用户

提问于 2017-05-15 11:27:25

回答 3查看 573关注 0票数 1

我想用相同的类名在多个div上做一个mousemove，但是鼠标位置没有在每个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');
 });
});

javascript

jquery

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-05-15 12:17:35

用另一个元素包装您的.reference元素。并将其位置设置为relative。另外，使用e.offsetX和e.offsetY代替e.pageX和e.pageY.Then，您正在处理的问题将得到解决。

工作实例

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

票数 0

Stack Overflow用户

发布于 2017-05-15 11:51:10

这是因为对于每个backgroud-position，backgroud-position应该是相对的。第一个很好，因为它的最大-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');

  });
});

票数 0

Stack Overflow用户

发布于 2017-05-15 11:51:34

你在var x和var y上的数学是错的。当你在1.15上越低的时候，你对e.pageY的划分就越大，结果也会越来越大。

没有划分，它工作得很好：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43978288

复制

相似问题

问同一个类名的多个div上的mousemove
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问同一个类名的多个div上的mousemoveEN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问同一个类名的多个div上的mousemove
EN