足球游戏_中国足彩网¥体育资讯$

html元素遮挡flash详解示例
来源:易贤网 阅读:1464 次 日期:2014-04-22 15:48:27
温馨提示:易贤网小编为您整理了“html元素遮挡flash详解示例”,方便广大网友查阅!

这篇文章主要介绍了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>

中国足彩网信息请查看IT技术专栏

中国足彩网信息请查看网页制作
易贤网手机网站地址:html元素遮挡flash详解示例
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标