Question

作为我上一个问题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，以防止水平滚动条在移动鼠标时出现和消失。最后我修改了你的脚本，只使用了一个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>

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

1 个答案: