這篇文章主要介紹了html元素遮蔽flash詳解範例,需要的朋友可以參考下
程式碼如下:
wmode参数: transparent模式:可用z-index控制层级 opaque模式:可用z-index控制层级 window模式:flash层级在浏览器核心显示窗口之上,flash会盖住与他重合的html
情境1(可修改flash的wmode參數)
修改wmode屬性為,transparent或opaque
DEMO如下:
程式碼如下:
<!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>
情境2(不可修改flash的wmode參數)-- flash和你的iframe遮蔽層在同一個頁面
註:如果要相容Safari、Opera,那麼請直接告訴需求這個遮不了
DEMO如下:
程式碼如下:
<!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>
情境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--> <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>
iframe頁:
程式碼如下:
<!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>
更多html元素遮蔽flash範例詳細介紹相關文章請關注PHP中文網!