使用 CSS 在 bootstrap 面板主体内向上滑动图像行

Question

我对 bootstrap 和 CSS 比较陌生。我在处理向上滑动动画时遇到问题，我需要将放在中 panel-body。理想情况下，我只想 CSS 而不是 jQuery.

来完成此操作

如果我有 36 个缩略图，我想要 panel-body 一次 "spins"（向上滑动）一行 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;
}

滚动

滚动的代码大部分都非常简单：您只需要在间隔内调整 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>

使用 CSS 在 bootstrap 面板主体内向上滑动图像行

Slide row of images up inside bootstrap panel-body on a loop using CSS

html

css

slide

css-animations

twitter-bootstrap

隐藏溢出

滚动

使滚动连续