主頁 > 知識(shí)庫 > html元素遮擋flash詳解示例

html元素遮擋flash詳解示例

熱門標(biāo)簽:華為收費(fèi)站地圖標(biāo)注 騰訊植物園地圖標(biāo)注 浦東新區(qū)百度地圖標(biāo)注圖片 經(jīng)綸電銷機(jī)器人 外呼智能系統(tǒng)報(bào)價(jià) 巫山縣地圖標(biāo)注app 電話機(jī)器人宣傳片 個(gè)貸電銷機(jī)器人 鄒城智能外呼系統(tǒng)


復(fù)制代碼
代碼如下:

wmode參數(shù):
transparent模式:可用z-index控制層級(jí)
opaque模式:可用z-index控制層級(jí)
window模式:flash層級(jí)在瀏覽器核心顯示窗口之上,flash會(huì)蓋住與他重合的html

情景1(可修改flash的wmode參數(shù))
修改wmode屬性為,transparent或opaque

DEMO如下:
 

復(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 class="m-box">
<object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="src" value="<a >
<param name="wmode" value="transparent"/>
<embed wmode="transparent" src="<a ></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 >
<param name="wmode" value="opaque"/>
<embed wmode="opaque" src="<a ></embed</a>>
</object></p> <p> <div class="m-shadow">
Jununx,歡迎您!--opaque
</div>
</div></p> <p></body>
</html>

情景2(不可修改flash的wmode參數(shù))-- flash和你的iframe遮擋層在同一個(gè)頁面
注:如果要兼容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 class="m-box">
<object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="src" value="<a >
<param name="wmode" value="window"/>
<embed wmode="window" src="<a ></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參數(shù))-- flash是被一個(gè)iframe頁面引入的
注:如果木有權(quán)限操作iframe頁面,那么請(qǐng)直接告訴需求這個(gè)遮不了注:如果要兼容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 { 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頁:
 

復(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 class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="src" value="<a >
<param name="wmode" value="window"/>
<embed wmode="window" src="<a ></embed</a>>
</object></p> <p><iframe class="ifr" frameborder="0"></iframe>
</body>
</html>

標(biāo)簽:廣西 南平 三沙 滁州 唐山 楊凌 那曲 日喀則

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《html元素遮擋flash詳解示例》,本文關(guān)鍵詞  html,元素,遮擋,flash,詳解,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《html元素遮擋flash詳解示例》相關(guān)的同類信息!
  • 本頁收集關(guān)于html元素遮擋flash詳解示例的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章