html元素遮挡flash详解示例

复制代码代码如下:
wmode参数：
transparent模式：可用z-index控制层级
opaque模式：可用z-index控制层级
window模式：flash层级在浏览器核心显示窗口之上，flash会盖住与他重合的htML

情景1（可修改flash的wmode参数）
修改wmode属性为，transparent或opaque

DEMO如下：
 

复制代码代码如下:
!doctyPE html>
html lang="en">
head>
meta charset="UTF-8">
tITle> HTML元素遮挡Flash - 情景1 /title>
style>
html, body, object, embed{ padding: 0; margin: 0; }
.m-box { position: relative; } /p> p> .m-flash, .m-flash embed { width: 400px; }
.m-shadow { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: #ccc; }
/style>
/head>
body>
!--transparent-->
div class="m-box">
object class="m-flash" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000">
param name="src" value="a href="http://www.aa.net/i/Bookmark.swf"> http://www.aa.net/i/bookmark.swf/a> ">
param name="wmode" value="transparent"/>
embed wmode="transparent" src="a href="http://www.aa.net/i/bookmark.swf"> /embed"> http://www.aa.net/i/bookmark.swf"> /embed/a> >
/object> /p> p> div class="m-shadow">
Jununx，欢迎您！--transparent
/div>
/div> /p> p> !--opaque-->
div class="m-box">
object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
param name="src" value="a href="http://www.aa.net/i/bookmark.swf"> http://www.aa.net/i/bookmark.swf/a> ">
param name="wmode" value="opaque"/>
embed wmode="opaque" src="a href="http://www.aa.net/i/bookmark.swf"> /embed"> http://www.aa.net/i/bookmark.swf"> /embed/a> >
/object> /p> p> div class="m-shadow">
Jununx，欢迎您！--opaque
/div>
/div> /p> p> /body>
/html>

情景2（不可修改flash的wmode参数）-- flash和你的iframe遮挡层在同一个页面
注：如果要兼容Safari、opera，那么请直接告诉需求这个遮不了

DEMO如下：
 

复制代码代码如下:
!doctype html>
html lang="en">
head>
meta charset="UTF-8">
title> HTML元素遮挡Flash - 情景2 /title>
style>
html, body, object, embed{ padding: 0; margin: 0; }
.m-box { position: relative; } /p> p> .m-flash, .m-flash embed { width: 400px; }
.m-flash { position: relative; z-index: 1; }
.m-shadow { position: absolute; top: 0; left: 0; z-index: 2; width: 100px; height: 100px; background-color: #ccc; }
.m-shadow-txt { position: absolute; z-index: 2; }
.m-shadow-ifr { position: absolute; z-index: -1; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); }
/style>
/head>
body>
!--window-->
div class="m-box">
object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
param name="src" value="a href="http://www.aa.net/i/bookmark.swf"> http://www.aa.net/i/bookmark.swf/a> ">
param name="wmode" value="window"/>
embed wmode="window" src="a href="http://www.aa.net/i/bookmark.swf"> /embed"> http://www.aa.net/i/bookmark.swf"> /embed/a> >
/object> /p> p> div class="m-shadow">
div class="m-shadow-txt"> Jununx，欢迎您！--window/div>
iframe class="m-shadow-ifr" frameborder="0"> /iframe>
/div>
/div> /p> p> /body>
/html>

情景3（不可修改flash的wmode参数）-- flash是被一个iframe页面引入的
注：如果木有权限操作iframe页面，那么请直接告诉需求这个遮不了注：如果要兼容Safari、Opera，那么请直接告诉需求这个遮不了

DEMO页：
 

复制代码代码如下:
!doctype html>
html lang="en">
head>
meta charset="UTF-8">
title> HTML元素遮挡Flash - 情景2 /title>
style>
html, body, object, embed{ padding: 0; margin: 0; }
.m-box { position: relative; } /p> p> .m-flash { position: relative; width: 400px; height: 400px; z-index: 1; }
.m-shadow { position: absolute; top: 0; left: 0; z-index: 2; width: 100px; height: 100px; background-color: #ccc; }
.m-shadow-txt { position: absolute; z-index: 2; }
.m-shadow-ifr { position: absolute; z-index: -1; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); }
/style>
/head>
body>
!--window-->
div class="m-box">
iframe class="m-flash" src="ifr.html" frameborder="0"> /iframe> /p> p> div class="m-shadow">
div class="m-shadow-txt"> Jununx，欢迎您！--window/div>
iframe class="m-shadow-ifr" frameborder="0"> /iframe>
/div>
/div> /p> p> /body>
/html>

iframe页：
 

复制代码代码如下:
!doctype html>
html lang="en">
head>
meta charset="UTF-8">
title> HTML元素遮挡Flash - 情景3 /title>
style>
html, body, object, embed{ padding: 0; margin: 0; }
.ifr { position: absolute; z-index: 2; width: 100px; height: 100px; opacity: 0; filter: alpha(opacity=0); }
.m-flash { position: absolute; z-index: 1; width: 400px; }
/style>
/head>
body>
!--window-->
object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
param name="src" value="a href="http://www.aa.net/i/bookmark.swf"> http://www.aa.net/i/bookmark.swf/a> ">
param name="wmode" value="window"/>
embed wmode="window" src="a href="http://www.aa.cn/i/bookmark.swf"> /embed"> http://www.aa.cn/i/bookmark.swf"> /embed/a> >
/object> /p> p> iframe class="ifr" frameborder="0"> /iframe>
/body>
/html>

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！