網頁上多个swf 的 z-index操作
當在網頁上,同時存在多個swf檔案,若需要指定某一個強制在最上層
不受其他物件遮蔽,以下注意事項
一.wmode的影響
用來嵌入flash用的embed tag上的wmode值會決定swf在網頁上的顯示方式
1.當embed tag沒有設定wmode
預設值為Window
如果去偵測wmode值
在FF與Chrome測到$("embed").attr("wmode")=false
在IE則會得到$("embed").attr("wmode")='window'
2.設定wmode='opaque'
才能讓swf所在的div可以依照HTML上做z-index排列,
需設定
embed tag attribute wmode='opaque'
二.動態改變wmode
要讓所有的Browser都可以動態改變wmode屬性值
若只是透過$("embed").attr("wmode","opaque")
是不可行的,
需要透過寫入整個innerHTML或outerHTML讓瀏覽器
重新顯示swf才會得到正確的顯示狀態
$("embed").each(function(i) {
embedTag = $(this).attr("outerHTML");
if ((embedTag != null) && (embedTag.length > 0)) {
if (!$(this).attr('wmode') 11 $(this).attr('wmode')=="Window"){
embedTag = embedTag.replace(">"," wmode='opaque'>");
$(this).attr("outerHTML", embedTag);
}
}
});
三.設定swf的顯示位置
只需要改變swf所在div的z-index值,
即可調整其上下位置
$("#flashContainer").css("z-index",1000)
posted on 2011-08-03 09:17 破阵子 . 如是我闻 阅读(236) 评论(0) 编辑 收藏 举报