代码改变世界

Flash 与 div 层次(z-index)关系

2013-09-09 10:37  臭小子1983  阅读(468)  评论(0编辑  收藏  举报

<param name="WMODE" value="transparent">

<param name="wmode" value="Opaque">

<param name="wmode" value="Window">

 

NOTE: 支持其它浏览器(firefox opera etc.) 则使用 <embed wmode="transparent" />在embed节点中加入wmode值.

 

window 模式

默认情况下的显示模式,在这种模式下flash player有自己的窗口句柄,这就意味着flash影片是存在于Windows中的一个显示实例,并且是在浏览器核心显示窗口之上的,所以flash只 是貌似显示在浏览器中,但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面,这就导致默认显示方式下flash总是会遮 住位置与他重合的所有DHTML层。

但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上,但当flash影片播放时会出现比较诡异的现象,比如DHTML层像被flash刮掉一块一样显示异常。

 

Opaque 模式

这是一种无窗口模式,在这种情况下flash player没有自己的窗口句柄,这就需要浏览器需要告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可 以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。

 

Transparent 模式

透明模式,在这种模式下flash player会将stage的背景色alpha值将为0并且只会绘制stage上真实可见的对象,同样你也可以使用z-index来控制flash影片的 深度值,但是与Opaque模式不同的是这样做会降低flash影片的回放效果,而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。

 

了解了各种模式的实现方式和意义在以后的开发中就可以按照具体情况选择设置wmode属性的值了。

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/donny001/archive/2008/07/08/2626116.aspx

 

问题:用Embed播放的Flash为什么总是在最前面,用DIV的z-index=99999也盖不住它 
也就是说没有东西可以盖住了这个Flash,他总是在最前面。

 

答:<PARAM   NAME= "WMode "   VALUE= "Opaque "> 即可

 

我要在Firefox下使用,所以可能不用能object只能用embed而且embed方便。

 

答:<object> 
<PARAM   NAME= "WMode "   VALUE= "Opaque "> 
</object> 

转成embed不就是 
<embed   wmode= "Opaque "> </embed> 
这样吗?

 

sorry我转了,忘记再回复上来了,可以 <embed   wmode= "Opaque "> ,静态的可以了。不过这个embed是动态生成的。所以用js给embed国wmode好像加不上。我再试试。

 

<embed   wmode= "Opaque "   id= "flash1 "> </embed> 

document.getElementById( "flash1 ").setAttribute( "wmode ", "Opaque ")

 

 

 

例:

1、opaque模式:div元素会在Flash之上

<div style="position:absolute;z-index:9999999; width:400px; height:200px; background:#E4E4E2; top:0px; left:0;">
adsfadsfasdfasdf
</div>

<div class="main" style="width:700px; position:absolute; left:40px; top:0; z-index:9;">
<embed width="640" height="100" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" swliveconnect="TRUE" name="flashad" wmode="opaque" quality="autohigh" src="http://img1.126.net/channel8734/014609/640100_0903_pacx.swf?clickTag=http%3A//g.163.com/c%3FAID%3D115418%26FlightID%3D1219%26Values%3D608018389%26Redirect%3Dhttp%3A//chexian.pingan.com/campaign/IB/wangyi-18.jsp%3FWT.mc_id%3DWc03-163-01">
</div>

 

2、window模式:div元素会在Flash之下

<div style="position:absolute;z-index:9999999; width:400px; height:200px; background:#E4E4E2; top:0px; left:0;">
adsfadsfasdfasdf
</div>

<div class="main" style="width:700px; position:absolute; left:40px; top:0; z-index:9;">
<embed width="640" height="100" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" swliveconnect="TRUE" name="flashad" wmode="window" quality="autohigh" src="http://img1.126.net/channel8734/014609/640100_0903_pacx.swf?clickTag=http%3A//g.163.com/c%3FAID%3D115418%26FlightID%3D1219%26Values%3D608018389%26Redirect%3Dhttp%3A//chexian.pingan.com/campaign/IB/wangyi-18.jsp%3FWT.mc_id%3DWc03-163-01">
</div>