使用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>