改变SWF在网页中处于最顶层的状态

  • 作者:39℃
  • 来源:56gee
  • 更新时间:2013-01-12 12:44:56
  • 点击:12737
[0分]

相信不少朋友在网页设计中会遇到过,SWF格式的文件在默认情况下总处于最顶层的苦恼。即使将目标图层的z-index 属性无论怎样设置也无济于事。要是网页中需要一些 LightBox 的弹出层效果,此时页面上的Flash可能会让其最终效果变得丑陋不堪。

今天就跟大家分享一下如何解决这种问题的技巧,先让我们看看演示实例的效果吧——

演示效果

下面是演示实例的源码——

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>改变SWF在网页中处于最顶层的状态</title> 
<meta name="keywords" content="SWF 顶层 56gee.com" /> 
<meta name="description" content="改变SWF在网页中处于最顶层的状态 56gee.com" /> 
<meta name="author" content="56gee 39℃" /> 
<style type="text/css"> 
<!-- 
.TextContent { 
 background-color: #9C0; 
 height: 150px; 
 width: 300px; 
 position: absolute; 
 z-index: 2; 
 filter: Alpha(Opacity=60); 
} 
.swf { 
 position: absolute; 
 z-index: 1; 
 left: 44px; 
 top: 41px; 
} 
--> 
</style> 
</head> 

<body> 
<div class="TextContent"></div> 
<div class="swf"> 
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="214" height="104"> 
    <param name="movie" value="56geeLogo.swf" /> 
    <param name="quality" value="high" /> 
    <param name="wmode" value="transparent" /> 
    <embed src="/56geeLogo.swf" quality="high" wmode="transparent" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="214" height="104"></embed> 
  </object> 
</div> 

</body> 
</html> 

从源码中不难发现,该实例给swf另外增加了wmode的属性。它用于指定窗口模式,其值有"window"窗口、"opaque"非窗口不透明、"transparent"非窗口透明三种。其中window表示Flash以窗口形式显示,opaque和transparent表示Flash以非窗口的形式显示。如果不给它进行设置,默认的wmode的值为window。无论我们如何设置z-index也不会有效果。解决的办法就是将wmode的属性值设为opaque或transparent。因为Flash在ie和ff下是用不同的标签嵌入的(ie下一boject标签嵌入,ff下embed标签嵌入)所以我们需要对两种标签记性设置。

收藏内容
评分

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途。若转载请注明来自56gee.com中的“来源”。

栏目精华