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()関数の外に移動すると、(img src の) http get が 1 回だけ実行されることになります。

$(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 に答える