css - 使用 CSS 在循环中将图像行向上滑动到 Bootstrap 面板主体内

Question

我对 bootstrap 和 CSS 比较陌生。我在处理向上滑动动画时遇到问题，我需要将其保留在 inside panel-body 中。理想情况下，我只想使用 CSS 而不是 jQuery 来完成此操作。

如果我有 36 个缩略图，我想要一个 panel-body 一次“旋转”(向上滑动)一行 12 个单列图像并循环。像这样的东西(我正在使用 angularjs):

<div class="panel-body">
    <div class="slideup">
        <!--this results in 36 divs that have an image-->
        <div ng-repeat="entity in entities" class="col-md-1">
            <img class="img-responsive" ng-src="{{ entity.logoUrl }}" />
        </div>
    </div>
</div>

<div class="panel-body">
    Anything inside this panel gets covered by the 24 remaining images which 
    should be invisible except when they're going through the visible
    "slideup" div in the panel-body above.
</div>

正如我在代码中评论的那样，问题是我可以看到整个图像 block 向上滑动，覆盖可能在 div 下方的任何内容，它们应该只在其中可见。

非常感谢任何帮助。

Answer 1

overflow hidden

您可以通过在 div.slideup 上设置固定高度并隐藏任何溢出来简单地使用 CSS 来防止看到额外的图像:

.slideup {
  overflow-y: hidden;
  height: 180px;
}
.slideup > div {
  position: relative;
  top: 0;
  height: 180px;
  padding: 0;
}
.slideup > div > img {
  height: 150px;
  padding: 0;
  margin: 15px;
}

滚动

滚动的代码大部分都非常简单:您只需调整 div.slideup 元素的 top 值。因为我们使用的是 angular，所以我会通过将它设置为 $scope.offset 的值来做到这一点:

$scope.offset = 0;
var interval = setInterval(function () {
    $scope.offset += -10;
    $scope.$apply();
},
200);

使滚动连续

最棘手的部分是连续滚动。为此，您必须在图像不可见时将其删除，然后将它们再次添加到 $scope.entitities 数组的底部。此时，您还需要重新设置$scope.offset 的值。所有这些都可以通过 Angular 的 $scope.$watch 来实现:

$scope.$watch('offset', function(newValue, oldValue, scope) {
  if (newValue == -180) {
    $scope.offset = 0;
    var removed = scope.entities.splice(0, 12);
    removed.forEach(function (item) {
      scope.entities.push(item);
    });
  }
});

请参阅下面的代码片段以了解实际情况。

angular.module('app', []);
angular.module('app').controller('ctrl', ['$scope',
  function($scope) {
    var placeholder10 = {
      logoUrl: 'https://placehold.it/30x150'
    };

    var placeholder20 = {
      logoUrl: 'https://placehold.it/20x150'
    };

    $scope.entities = [];
    for (var i = 0; i < 18; i++) {
      $scope.entities.push(angular.copy(placeholder10));
    }
    for (var i = 0; i < 18; i++) {
      $scope.entities.push(angular.copy(placeholder20));
    }

    $scope.offset = 0;

    $scope.$watch('offset', function(newValue, oldValue, scope) {
      if (newValue == -180) {
        $scope.offset = 0;
        var removed = scope.entities.splice(0, 12);
        removed.forEach(function (item) {
          scope.entities.push(item);
        });
      }
    });

    var interval = setInterval(function() {
        $scope.offset += -10;
        $scope.$apply();
      },
      100);

  }
]);

.slideup {
  overflow-y: hidden;
  height: 180px;
}
.slideup > div {
  position: relative;
  top: 0;
  height: 180px;
  padding: 0;
}
.slideup > div > img {
  height: 150px;
  padding: 0;
  margin: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div ng-app="app" ng-controller="ctrl" class="panel-body">
  <div class="slideup row">
    <!--this results in 36 divs that have an image-->
    <div ng-repeat="entity in entities" class="col-xs-1" ng-style="{'top': offset + 'px'}">
      <img class="img-responsive" ng-src="{{ entity.logoUrl }}" />
    </div>
  </div>
</div>

<div class="panel-body">
  Anything inside this panel gets covered by the 24 remaining images which should be invisible except when they're going through the visible "slideup" div in the panel-body above.
</div>