2

这是小提琴！

图像应该向上移动直到它的底部边缘到达 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>

4

1 回答 1

0

像这样的东西似乎有效：

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

这是你想要的效果吗？

于 2013-10-27T17:57:44.833 回答