Question

我在网站简介中使用Polaroid Gallery以及html块，如此测试页所示：http://www.intellectualloyd.com/ladybug/

如果双击一个包，则会发生Flash动画，并且图像会在页面中间显示得更大。在这种情况下，图像（flash对象）应该保留在html块（徽标等）的前面，并在再次双击时返回到最低的堆栈顺序。

在代码中，有两个主要的div：

中间包含html块的
一个空的，包含flash对象：<div id="flashfullscreen" class="fOff"></div>

之后，我使用SWFObject库加载.swf，将它放在#flashfullscreen div中：

<script type="text/javascript">
//<![CDATA[
var so = new SWFObject("polaroid.swf", "polaroid", "100%", "100%", "8");
// specify the url to the xml-file, default is photos.xml
so.addVariable("xmlURL","photos.xml");
so.addParam("wmode", "transparent");
so.write("flashfullscreen");
//]]>
</script>

为了实现双击效果，改变两个div的堆栈顺序，我使用了jQuery：

<script type="text/javascript">
$(document).ready(function() {
    $('#flashfullscreen').dblclick(function() {
        $('#flashfullscreen').toggleClass('fOff');
    });
});
</script>

.fOff {z-index：99！important;是班级风格 flashfullscreen div风格有z-index：999 中间的块有z-index：100。

粗略地说，当双击时，我使用jquery从flashfullscreen div中删除fOff类，以便为将在html块前面显示的块设置更高的z-index（999）。 / p>

您可能会看到问题所在。如果双击大图像以“关闭”它，它就可以了，并且堆栈顺序正确反转。但是，如果你双击周围的空白区域，html块就会出现在图像前面，该图像仍处于“打开”状态。

我确信有一个更简单，更完整的解决方案，编辑Flash对象或使用SWFObject方法。有人可以帮助我吗？

Answer 1

Flash Player不尊重Z-Index。无论您指定哪个索引，如果 SWF在CSS中position: absolute以及transparent或opaque的wmode，它将始终位于顶部。（FWIW，你应该总是选择透明不透明，除非你真的需要透明度，因为wmode的bug和CPU的透明度增加了。）

这里的教程和示例： http://learnswfobject.com/advanced-topics/placing-html-elements-over-a-flash-movie/

宝丽来flash画廊与html内容的互动（堆叠顺序）

1 个答案: