首页 > 网站 > WEB开发 > 正文

HTML元素遮挡Flash之梦

2024-04-27 14:35:47
字体:
来源:转载
供稿:网友
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; }        .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="http://www.Vevb.com.cn/i/bookmark.swf">        <param name="wmode" value="transparent"/>        <embed wmode="transparent" src="http://www.Vevb.com.cn/i/bookmark.swf"></embed>    </object>    <div class="m-shadow">        Jununx,欢迎您!--transparent    </div></div><!--opaque--><div class="m-box">    <object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">        <param name="src" value="http://www.Vevb.com.cn/i/bookmark.swf">        <param name="wmode" value="opaque"/>        <embed wmode="opaque" src="http://www.Vevb.com.cn/i/bookmark.swf"></embed>    </object>    <div class="m-shadow">        Jununx,欢迎您!--opaque    </div></div></body></html>
View Code

情景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; }        .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="http://www.Vevb.com.cn/i/bookmark.swf">        <param name="wmode" value="window"/>        <embed wmode="window" src="http://www.Vevb.com.cn/i/bookmark.swf"></embed>    </object>    <div class="m-shadow">        <div class="m-shadow-txt">Jununx,欢迎您!--window</div>        <iframe class="m-shadow-ifr" frameborder="0"></iframe>    </div></div></body></html>
View Code

情景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; }        .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>    <div class="m-shadow">        <div class="m-shadow-txt">Jununx,欢迎您!--window</div>        <iframe class="m-shadow-ifr" frameborder="0"></iframe>    </div></div></body></html>
View Code

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="http://www.Vevb.com.cn/i/bookmark.swf">    <param name="wmode" value="window"/>    <embed wmode="window" src="http://www.Vevb.com.cn/i/bookmark.swf"></embed></object><iframe class="ifr" frameborder="0"></iframe></body></html>
View Code


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表