使用CSS在一个循环中在引导板体内滑动图像行

Question

我对bootstrap和CSS相对较新。我在滑动动画方面遇到了麻烦，我需要将保留在中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>

正如我在代码中所评论的那样，问题是我可以看到整个图像块向上滑动，覆盖可能位于div之下的任何内容，这些内容只能在其中显示。

非常感谢任何帮助。

Answer 1

隐藏溢出

您可以通过在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;
}

滚动

滚动的代码大多非常简单：您只需要在一个时间间隔内调整top元素的div.slideup值。由于我们使用的是角度，我会将其设置为$scope.offset的值：

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

滚动连续

最棘手的部分是连续滚动。要执行此操作，您必须在图像不在视图时将其删除，然后将它们再次添加到$scope.entitities数组的底部。目前，您还需要重置$scope.offset的值。所有这一切都可以通过角度$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>