|
【filter模式】
filter模式在_filterData程序中得到文件本地路徑，但ie7/8都不允許直接使用本地路徑顯示圖片。
不過(guò)還是可以通過(guò)濾鏡，用本地路徑來(lái)做預(yù)覽圖片效果。
filter模式使用_filterShow方法來(lái)顯示預(yù)覽圖片。
里面先調(diào)用_filterPreload方法來(lái)設(shè)置濾鏡預(yù)載圖片對(duì)象。
跟一般預(yù)載圖片對(duì)象不同，濾鏡預(yù)載對(duì)象是用濾鏡來(lái)顯示圖片，所以并不一定要圖像元素。
程序就使用了div元素作為濾鏡預(yù)載對(duì)象：
var preload = this._preload = document.createElement("div");
$$D.setStyle( preload, {
width: "1px", height: "1px",
visibility: "hidden", position: "absolute", left: "-9999px", top: "-9999px",
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image')"
});
var body = document.body; body.insertBefore( preload, body.childNodes[0] );
在樣式設(shè)置中隱藏元素并添加濾鏡，要使濾鏡生效width和height必須設(shè)置一個(gè)值。
由于要獲取尺寸，只能用visibility來(lái)隱藏并插入body，關(guān)于AlphaImageLoader濾鏡后面再介紹。
然后在_filterShow中預(yù)載圖片：
try{
preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = data;
}catch(e){ this._error("filter error"); return; }
成功的話(huà)，再給img載入圖片：
this.img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + data + "')";
最后調(diào)用_imgShow設(shè)置尺寸：
this._imgShow( ImagePreview.TRANSPARENT, preload.offsetWidth, preload.offsetHeight );
由于img是一個(gè)圖片對(duì)象，默認(rèn)會(huì)顯示一個(gè)小圖標(biāo)，為了去掉這個(gè)小圖標(biāo)，可以讓它顯示一個(gè)透明圖片。
程序傳遞了ImagePreview.TRANSPARENT來(lái)設(shè)置透明圖片，具體數(shù)據(jù)在Data URI 和 MHTML再說(shuō)明。
ps：當(dāng)然也可以在filter模式用div做預(yù)覽圖片對(duì)象就沒(méi)有小圖標(biāo)了，但這樣兼容起來(lái)會(huì)麻煩很多。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) JavaScript 圖片預(yù)覽效果 [5] 下一頁(yè) JavaScript 圖片預(yù)覽效果 [7]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 6 頁(yè) JavaScript 圖片預(yù)覽效果 [6]
