javascript - 使用 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();

希望这对您有所帮助。