圖像懸停運動會導致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>