html元素遮擋flash詳解示例

2020-03-24 16:44:11

字體：大中小

供稿：網(wǎng)友

復(fù)制代碼代碼如下:
wmode參數(shù)：
transparent模式：可用z-index控制層級(jí)
opaque模式：可用z-index控制層級(jí)
window模式：flash層級(jí)在瀏覽器核心顯示窗口之上，flash會(huì)蓋住與他重合的html
情景1（可修改flash的wmode參數(shù)）
修改wmode屬性為，transparent或opaqueDEMO如下：

復(fù)制代碼代碼如下:
!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
object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
param name="src" value=" a http://www.aa.net/i/bookmark.swf /a "
param name="wmode" value="transparent"/
embed wmode="transparent" src=" a /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 http://www.aa.net/i/bookmark.swf /a "
param name="wmode" value="opaque"/
embed wmode="opaque" src=" a /embed" http://www.aa.net/i/bookmark.swf" /embed /a
/object /p p div
Jununx，歡迎您！--opaque
/div
/div /p p /body
/html
情景2（不可修改flash的wmode參數(shù)）-- flash和你的iframe遮擋層在同一個(gè)頁(yè)面
注：如果要兼容Safari、Opera，那么請(qǐng)直接告訴需求這個(gè)遮不了 DEMO如下：

復(fù)制代碼代碼如下:
!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
object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
param name="src" value=" a http://www.aa.net/i/bookmark.swf /a "
param name="wmode" value="window"/
embed wmode="window" src=" a /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
情景3（不可修改flash的wmode參數(shù)）-- flash是被一個(gè)iframe頁(yè)面引入的
注：如果木有權(quán)限操作iframe頁(yè)面，那么請(qǐng)直接告訴需求這個(gè)遮不了注：如果要兼容Safari、Opera，那么請(qǐng)直接告訴需求這個(gè)遮不了DEMO頁(yè)：

復(fù)制代碼代碼如下:
!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
iframe src="ifr.html" frameborder="0" /iframe /p p div
div Jununx，歡迎您！--window /div
iframe frameborder="0" /iframe
/div
/div /p p /body
/html
iframe頁(yè)：

復(fù)制代碼代碼如下:
!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 classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
param name="src" value=" a http://www.aa.net/i/bookmark.swf /a "
param name="wmode" value="window"/
embed wmode="window" src=" a /embed" http://www.aa.cn/i/bookmark.swf" /embed /a
/object /p p iframe frameborder="0" /iframe
/body
/html

html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：HTML網(wǎng)頁(yè)的段落排版和換行

下一篇：如何給html中的pre標(biāo)簽中的文字換行？html pre標(biāo)簽的使用實(shí)例