javascript - 让内容溢出

Question

我正在尝试做一些我需要复制所有条目(多次)的东西，然后我想让它旋转并慢慢地落在一种颜色上，等等。我现在只是陷入了复制颜色，我怎样才能让新颜色溢出而不是加倍宽度？

我想要它，以便颜色从 wrapper div 中消失。现在他们只是在分发自己。

有什么想法吗？

$(document).on("click", ".duplicate", function() {
  var $wrapper = $('.wrapper .inner');

  $wrapper.find('.color').each(function() {
    $wrapper.append($(this).clone());
  });
});

.wrapper {
  width: 75%;
  margin: 12px auto;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.wrapper .inner {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
}

.wrapper .color {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="inner">
    <div class="color" style="background:red;width:231%"></div>
    <div class="color" style="background:purple;width:111%"></div>
    <div class="color" style="background:orange;width:91%"></div>
  </div>
</div>

<button class='duplicate'>
  Duplicate
</button>

Answer 1

为了让两个元素在文档流中处于相同位置，您需要使用 position:relative 将它们包装在父级中，并给其中一个 position:absolute;顶部:0；左侧:0。另请注意，如果您的元素没有任何内容，您可能需要定义它的 height 和 width。要使其与父级大小相同，您可以给它 top:0;bottom:0;left:0;right:0;。

这是一个从your fiddle 开始的演示.您可能想在按下“复制”后检查 DOM。我将其恢复为原始状态，因此您可以多次执行此操作。

但请注意，您的问题目前尚不清楚。恐怕你在“让它旋转并缓慢地落在颜色上” 时迷失了我。这真的很有诗意，但不会让你走得太远......