使用jQuery來移動基於鼠標位置的div背景

Question

我正在尋找寫一些代碼，可以微妙地移動基於x軸鼠標移動的div背景。我目前使用.mousemove和background-position屬性來移動背景圖片。我必須根據窗口大小稍微移動背景，以便不會脫離頁面。我設置了一些if語句來處理這個問題，但是窗口大小調整後，背景位置不會更新。它只在頁面完全重新載入時才起作用 - 然後它再次讀取if語句並且背景被正確定位。對於較小窗口的媒體查詢，背景位置爲23％50％，對於較大窗口大小的媒體查詢，背景位置爲40％50％。關於如何修改代碼以在窗口大小調整時實時更新背景位置的任何想法？

謝謝！

$(document).ready(function(){ 

    if ($(".container").css("background-position")=="23% 50%") 
    { 
     $(document).mousemove(function(event) { 
     var m = event.pageX; 
     var q = 23 + m/200; 
     $(".container").css({"background-position": q + "% 50%"}); 
     $(".andServices").text(q); 
     }); 
    } 
    else if ($(".container").css("background-position")=="40% 50%") 
    { 
     $(document).mousemove(function(event){ 
     var z = event.pageX; 
     var t = 40 + z/200; 
     $(".container").css({"background-position": t + "% 50%"}); 
     $(".creativeProducts").text(t); 
     }); 
    } 

}); 

<div class="container"> 
<div class = "mobileBG"></div> 
    <div class="textContainer"> 

    <p class="creativeProducts">Creative Products</p> 
    <p class = "andServices">And Services</p> 
    <p class = "ebaySales">eBay Sales</p> 
    <p class = "seoServices">SEO Services</p> 
    <p class = "webDesign">Web Design</p> 
    <p class = "photography">Photography</p> 
    </div> 
</div> 

.container{ 
    width:100%; 
    position:relative; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    height:750px; 
    background-image:url(images/frontCoverImage.gif); 
    background-size:cover; 
    background-repeat:no-repeat; 
    background-position:23% 50%; 
} 

Answer 1

基本上，如果你想趕上瀏覽器調整，您將需要使用以下。

$(window).resize(); 

希望這會有所幫助。

Answer 2

試試這個

$(window).resize(function(){ 
    // Your if else statement here 
}); 

jQuery的.resize()每當用戶調整窗口/瀏覽器

Answer 3

@Norman基本工作原理是正確的，你需要使用jQuery的.resize()這一點。

但是，您可以使用.on()事件偵聽器將.resize()和.load()包裝在一起。

$(document).ready(function() { 
 
    $(window).on('load resize', function() { 
 
    if ($(".container").css("background-position") == "23% 50%") { 
 
     $(document).mousemove(function(event) { 
 
     var m = event.pageX; 
 
     var q = 23 + m/200; 
 
     $(".container").css({ 
 
      "background-position": q + "% 50%" 
 
     }); 
 
     $(".andServices").text(q); 
 
     }); 
 
    } else if ($(".container").css("background-position") == "40% 50%") { 
 
     $(document).mousemove(function(event) { 
 
     var z = event.pageX; 
 
     var t = 40 + z/200; 
 
     $(".container").css({ 
 
      "background-position": t + "% 50%" 
 
     }); 
 
     $(".creativeProducts").text(t); 
 
     }); 
 
    } 
 
    }); 
 
});

.container { 
 
    width: 100%; 
 
    position: relative; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 750px; 
 
    background-image: url(images/frontCoverImage.gif); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: 23% 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="mobileBG"></div> 
 
    <div class="textContainer"> 
 
    <p class="creativeProducts">Creative Products</p> 
 
    <p class="andServices">And Services</p> 
 
    <p class="ebaySales">eBay Sales</p> 
 
    <p class="seoServices">SEO Services</p> 
 
    <p class="webDesign">Web Design</p> 
 
    <p class="photography">Photography</p> 
 
    </div> 
 
</div>