javascript - jQuery 动画 : move image up-down in smaller height div with overflow:hidden

Question

这是 fiddle !

图像应该向上移动直到它的底部边缘到达 div 的底部，然后向下移动直到它的顶部边缘到达父 div 的顶部边缘，以显示它。

这必须适用于不同大小的图像。

$(document).ready(function() {
  move();
});

function move() {
  $(".image").animate({
    bottom: "-=50%"
  }, 10000, 'linear', function() {
    $(".image").animate({
      bottom: "+=50%"
    }, 10000, 'linear', move);
  });
}

.container {
  position: relative;
  width: 1100px;
  height: 480px;
  overflow: hidden;
  background-color: #000;
}

.image {
  position: absolute;
  max-width: 100%;
  min-width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="container">
  <img class="image" src="http://www.hotel-aramis.com/slider/home/notre-dame-de-paris.jpg />
    </div>

Answer 1

这样的事情似乎可行:

$(document).ready(function () {
  move();
});

function move() {
  $img = $(".image");
  var i = new Image();
  i.src = $img.attr('src');

  var d = i.height - $('.container').height();

  $img.animate({
    bottom: "+="+d+'px'
  }, 10000, 'linear', function () {
    $img.animate({
        bottom: "-="+d+'px'
    }, 10000, 'linear', move);
  });
}

这有点偷偷摸摸，它使用与所选对象相同的 src 创建一个新的 javascript 图像对象(非 Jquery)，并使用其自然高度来执行动画。看起来，如果我们创建一个 jQuery 对象，它的高度不一样，也许它需要附加到 dom 或类似的东西。

Jsfiddle:http://jsfiddle.net/VqzvR/8/

将设置代码移到 move() 函数之外意味着 http get(对于 img src)将只执行一次:

$(document).ready(function () {
  setupMove();
});

function setupMove() {
  $img = $(".image");
  var i = new Image();
  i.src = $img.attr('src');

  var d = i.height - $('.container').height();

  function move() {
    $img.animate({
        bottom: "+="+d+'px'
    }, 10000, 'linear', function () {
        $img.animate({
            bottom: "-="+d+'px'
        }, 10000, 'linear', move);
    });
  }
  move();
}

这就是您想要的效果吗？