图像悬停运动会导致X轴溢出？

Question

作为对我上一个问题这里的跟进，我尝试在页面的两边设置悬停图像。

小提琴

联署材料：

var movementStrength = 25;
var w = $(window).width();
var h = $(window).height();

$(window).mousemove(function(e){          
          var pageX = (e.pageX - w / 2) / w / 2;
          var pageY = (e.pageY - h / 2) / h / 2;
          var newvalueX = pageX * movementStrength;
          var newvalueY = pageY * movementStrength;          
          $('.top-image-left').css({ left: newvalueX + 'px', top: newvalueY + 'px'});
});


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class='top-contain-left'>
      <div class="top-image-left">
      </div>
    </div>

    <div class='top-contain-right'>
      <div class="top-image-right"></div>
    </div>

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='top-contain-left'>
  <div class="top-image-left">
  </div>
</div>

<div class='top-contain-right'>
  <div class="top-image-right"></div>
</div>

CSS：

.top-contain-left {
  padding: 25px;
  width: 35%;
  height: 35%;
  position: absolute;
  top: 400px;
}

.top-image-left {
  background: url('http://i.imgur.com/wZRaMrB.png');
  position: absolute;
  background-size: contain;
  width: 100%;
  z-index: 0;
  height: 100%;
  background-repeat: no-repeat;
}


.top-contain-right {
  padding:25px;
  width:35%;
  height:35%;
  position:absolute;
  top:400px;
  right: -20%;
}


.top-image-right {
  background:url('http://i.imgur.com/Qn6xkCZ.png');
  position:absolute ;
  background-size: contain;
  width:100%;
  z-index:0;
  height:100%;
  background-repeat: no-repeat;  
}

你会注意到右边有一个溢出。(此时不能上传超过2个链接)

你也可以在我的网站http://jenngaudio.x10host.com/Flower%20Spark/上查看

我尝试过overflow-x: hidden属性，但是它会给整个页面带来问题--可能是因为我使用的是响应性骨架。

Answer 1

右填充是由默认的background-position (即left top )引起的。图像的宽度小于容器div的宽度，因此您可以看到正确的填充。要解决这个问题，只需使用background-position: right top将背景图像对齐即可。此外，您应该将overflow-x:hidden应用于body，以防止移动鼠标时水平滚动条的出现和消失。最后，我将您的脚本修改为只使用一个window.onmousemove处理程序。您不需要2个处理程序，因为您使用相同的计算值来更新2个图像的位置(即使需要不同的值，也可以在同一个处理程序中执行不同的计算)。

以下是更新的代码：

​

var movementStrength = 25;
var w = $(window).width();
var h = $(window).height();

$(window).mousemove(function(e){          
          var pageX = (e.pageX - w / 2) / w / 2;
          var pageY = (e.pageY - h / 2) / h / 2;
          var newvalueX = pageX * movementStrength;
          var newvalueY = pageY * movementStrength;          
          $('.top-image-left').css({ left: newvalueX + 'px', top: newvalueY + 'px'});
          $('.top-image-right').css({ right: newvalueX + 'px', top: newvalueY + 'px'});
});

.top-contain-left {
  padding: 25px;
  width: 35%;
  height: 35%;
  position: absolute;
  top: 400px;
}

.top-image-left {
  background: url('http://i.imgur.com/wZRaMrB.png');
  position: absolute;
  background-size: contain;
  width: 100%;
  z-index: 0;
  height: 100%;
  background-repeat: no-repeat;
}


.top-contain-right {
  padding:25px;
  width:35%;
  height:35%;
  position:absolute;
  top:400px;
  right: 0%;  
}


.top-image-right {
  background:url('http://i.imgur.com/Qn6xkCZ.png') right top;
  position:absolute ;
  background-size: contain;
  width:100%;
  z-index:0;
  height:100%;
  background-repeat: no-repeat;  
  right:0px;  
}
body {
  overflow-x:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='top-contain-left'>
  <div class="top-image-left">
  </div>
</div>

<div class='top-contain-right'>
  <div class="top-image-right"></div>
</div>

​