Maison >interface Web >tutoriel HTML >Introduction détaillée à l'exemple Flash de blocage d'éléments HTML
Introduction détaillée à l'exemple Flash de blocage d'éléments HTML
- 高洛峰original
- 2017-03-06 16:03:361301parcourir
Cet article présente principalement l'exemple détaillé d'un élément HTML bloquant Flash. Les amis qui en ont besoin peuvent se référer à
Le code est le suivant :
wmode参数： transparent模式：可用z-index控制层级 opaque模式：可用z-index控制层级 window模式：flash层级在浏览器核心显示窗口之上，flash会盖住与他重合的html
Scénario 1 (le paramètre wmode). de flash peut être modifié)
Modifier l'attribut wmode en transparent ou opaque
DEMO est le suivant :
Le code est le suivant :
<!doctype html>
<html>
<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>
<object 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>
Jununx，欢迎您！--transparent
</div>
</div></p> <p><!--opaque-->
<div>
<object 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>
Jununx，欢迎您！--opaque
</div>
</div></p> <p></body>
</html>Scénario 2 (le paramètre wmode du flash ne peut pas être modifié)--Le flash et votre couche d'occlusion iframe sont sur la même page
Remarque : si vous souhaitez être compatible avec Safari et Opera, veuillez indiquer directement à l'exigence que cela ne peut pas être couvert
La DÉMO est la suivante :
Le code est le suivant :
<!doctype html>
<html>
<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>
<object 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>
<div>Jununx，欢迎您！--window</div>
<iframe frameborder="0"></iframe>
</div>
</div></p> <p></body>
</html>Scénario 3 (le paramètre wmode du flash ne peut pas être modifié) - le flash est introduit par une page iframe
Remarque : Si vous n'avez pas l'autorisation d'utiliser la page iframe, veuillez indiquer directement à la demande que cela ne peut pas couvrir la note : Si vous souhaitez être compatible avec Safari et Opera, veuillez indiquer directement la demande que cela ne peut pas être couvert
Page DEMO :
Le code est le suivant :
<!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-->
<p class="m-box">
<iframe class="m-flash" src="ifr.html" frameborder="0"></iframe></p>
<p> <p class="m-shadow">
<p class="m-shadow-txt">Jununx，欢迎您！--window</p>
<iframe class="m-shadow-ifr" frameborder="0"></iframe>
</p>
</p></p>
<p></body>
</html>Page iframe :
Le code est le suivant :
<!doctype html>
<html>
<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 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 frameborder="0"></iframe>
</body>
</html>Pour plus d'exemples Flash de blocage d'éléments HTML, veuillez prêter attention au site Web PHP chinois pour les articles connexes.