javascript IE7 瀏覽器本地圖片預覽
更新時間:2009年03月19日 01:05:04 作者:
在 IE6 中,可以很方便地利用 img 的 src 屬性,實現(xiàn)本地圖片預覽,然而在 IE7 中,這種辦法卻行不通。需要用 AlphaImageLoader
說明:
在對象容器邊界內(nèi),在對象的背景和內(nèi)容之間顯示一張圖片。并提供對此圖片的剪切和改變尺寸的操作。如果載入的是PNG(Portable Network Graphics)格式,則0%-100%的透明度也被提供。
語法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
enabled:可選項。布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活。
true:默認值。濾鏡激活。
false:濾鏡被禁止。
sizingMethod:可選項。字符串(String)。設(shè)置或檢索濾鏡作用的對象的圖片在對象容器邊界內(nèi)的顯示方式。
crop:剪切圖片以適應對象尺寸。
image:默認值。增大或減小對象的尺寸邊界以適應圖片的尺寸。
scale:縮放圖片以適應對象的尺寸邊界。
src:必選項。字符串(String)。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數(shù),濾鏡將不會作用。
具體操作:
為預覽區(qū)域(比如要在某個 div 中預覽)添加樣式:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);。
為 AlphaImageLoader 設(shè)置 src 屬性。
示例文件:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
在對象容器邊界內(nèi),在對象的背景和內(nèi)容之間顯示一張圖片。并提供對此圖片的剪切和改變尺寸的操作。如果載入的是PNG(Portable Network Graphics)格式,則0%-100%的透明度也被提供。
語法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
enabled:可選項。布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活。
true:默認值。濾鏡激活。
false:濾鏡被禁止。
sizingMethod:可選項。字符串(String)。設(shè)置或檢索濾鏡作用的對象的圖片在對象容器邊界內(nèi)的顯示方式。
crop:剪切圖片以適應對象尺寸。
image:默認值。增大或減小對象的尺寸邊界以適應圖片的尺寸。
scale:縮放圖片以適應對象的尺寸邊界。
src:必選項。字符串(String)。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數(shù),濾鏡將不會作用。
具體操作:
為預覽區(qū)域(比如要在某個 div 中預覽)添加樣式:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);。
為 AlphaImageLoader 設(shè)置 src 屬性。
示例文件:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
您可能感興趣的文章:
- JS預覽圖像將本地圖片顯示到瀏覽器上
- Javascript圖片上傳前的本地預覽實例
- 在頁面預覽客戶端本地圖片的js代碼(兼容FF IE)
- 純JS實現(xiàn)本地圖片預覽的方法
- javascript firefox不顯示本地預覽圖片問題的解決方法
- JS中利用FileReader實現(xiàn)上傳圖片前本地預覽功能
- JavaScript實現(xiàn)圖片本地預覽功能【不用上傳至服務(wù)器】
- 原生js FileReader對象實現(xiàn)圖片上傳本地預覽效果
- 基于JavaScript實現(xiàn)本地圖片預覽
- JavaScript實現(xiàn)預覽本地上傳圖片功能完整示例
- js實現(xiàn)的在本地預覽圖片功能示例
相關(guān)文章
發(fā)一個自己用JS寫的實用看圖工具實現(xiàn)代碼
所以決定慢慢來照顧一下博客吧,這里先把眼前就有的一個小東西拿出來和大家分享一下,這是2006年的時候(文本里記下了時間,不然也忘記了)為了自己看網(wǎng)絡(luò)圖片方便而寫的。2008-07-07JavaScript 控制圖片改變重疊順序的代碼(鼠標移動切換)
JavaScript實例,通過控制Html網(wǎng)頁元素,來控制圖片的重疊順序,鼠標移上某一張,那一張就顯示在最前面,移動到最后層,它會顯示在最前,有意思吧,其實挺簡單。2010-10-10javascript 鼠標懸浮圖片顯示原圖 移出鼠標后原圖消失(多圖)
其實我想實現(xiàn)的只是大圖預覽,不需要太復雜。后來,在原來有的javascript資料里找到這個:)“JavaScript網(wǎng)頁設(shè)計300例.chm”, 從里面找到了類似的下拉菜單的例子修改了一下,以實現(xiàn)這個功能。2009-12-12