html前端元素代码—解析flash遮挡

最新推荐文章于 2022-08-21 19:46:34 发布

云南仟龙Mark

最新推荐文章于 2022-08-21 19:46:34 发布

阅读量277

点赞数

文章标签：前端 css html

原文链接：https://blog.51cto.com/u_15111999/4946059

版权

今天分享下”html前端元素代码—解析flash遮挡“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。代码如下:

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>>

/* http://www.qlyl1688.com */

</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>

以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

云南仟龙Mark

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html前端元素代码—解析flash遮挡

今天分享下”html前端元素代码—解析flash遮挡“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。代码如下:wmode参数：transparent模式：可用z-index控制层级opaque模式：可用z-index控制层级window模式：flash在浏览器核心显示窗口上方，flash覆盖与他重合的东西html场景1(可修改flash的wmode参数）修改wmode属性为，transparent或op
复制链接

扫一扫