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＆＃39; .resize()。

但是，您可以使用.resize()事件侦听器将.load()和.on()包装在一起。

＆＃13;

$(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);
      });
    }
  });
});

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

使用jQuery根据鼠标位置移动div背景

3 个答案: