html元素遮挡flash详解示例

前端技术 2023/09/09 HTML


复制代码
代码如下:

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>


本文地址：https://www.stayed.cn/item/23689

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案