3

我正在创建一个图像滑块，我希望将爆炸效果作为过渡。但问题是，explode 在触发时会超出周围的 div。

<div class="outer"> <!-- outer container that the explosion shouldn't spill over -->
    <div class="explode"><img src="http://lorempixel.com/400/200/"/></div><!-- Stuff to explode -->
</div>

我想要的是一种带有溢出的环绕div：隐藏，这样它就不会覆盖其他页面元素。我试过这个，但它并没有真正起作用：

http://jsfiddle.net/SJFpF/1/

我将不得不创建自己的，还是可以这样做但我只是很密集？

4

2 回答 2

7

问题是爆炸效果会创建许多弹片元素，然后将它们附加到body. 我发现覆盖这些元素的容器的唯一方法是更改​​动画的实际代码，以便将这些元素附加到动画元素之后。

源代码片段：

el
    .clone()
    .insertAfter( el ) // This was previously .appendTo( "body" )
    .wrap( "<div></div>" )
    .css({
        position: "absolute",
        visibility: "visible",
        left: -j * width,
        top: -i * height
    })

请参阅jsFiddle 上的测试用例

于 2013-06-18T16:56:11.973 回答
2

这不起作用的原因是您的效果并没有真正扩展图像本身。它将它切成块，然后使用绝对定位来移动它们。溢出不适用，因为绝对定位会将它们拉出元素堆栈。也就是说，突然图像在包含 div的前面一层。

如果你想让它起作用，你将不得不编写自己的效果。一种方法可能是创建一个小 div 网格并使用图像片段作为背景；然后，您可以在不同方向上缩小 div，使它们看起来像彼此远离。或者，如果您不介意失去“破碎”效果，您可以简单地使图像逐渐扩大和淡出。这可能是最简单的方法。

于 2013-06-18T17:04:23.440 回答