DDR爱好者之家 Design By 杰米


复制代码代码如下:
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="/UploadFiles/2021-03-30/<a href="> </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="/UploadFiles/2021-03-30/<a href="> </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="/UploadFiles/2021-03-30/<a href="> </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="/UploadFiles/2021-03-30/ifr.html"> <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="/UploadFiles/2021-03-30/<a href="></object></p> <p><iframe class="ifr" frameborder="0"></iframe>
</body>
</html>

DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。