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

Question

作为我之前的问题here 的后续，我尝试在页面的两侧制作悬停图像。

jsfiddle

JS：

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 以防止水平滚动条在移动鼠标时出现和消失。最后，我稍微修正了您的脚本，只使用了 1 个 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>