javascript IE7 瀏覽器本地圖片預覽_圖象特效

來源:互聯網
上載者:User
說明:
在對象容器邊界內,在對象的背景和內容之間顯示一張圖片。並提供對此圖片的剪下和改變尺寸的操作。如果載入的是PNG(Portable Network Graphics)格式,則0%-100%的透明度也被提供。
文法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
enabled:可選項。布爾值(Boolean)。設定或檢索濾鏡是否啟用。
true:預設值。濾鏡啟用。
false:濾鏡被禁止。
sizingMethod:可選項。字串(String)。設定或檢索濾鏡作用的對象的圖片在對象容器邊界內的顯示方式。
crop:剪下圖片以適應對象尺寸。
image:預設值。增大或減小對象的尺寸邊界以適應圖片的尺寸。
scale:縮放圖片以適應對象的尺寸邊界。
src:必選項。字串(String)。使用絕對或相對 url 地址指定背景映像。假如忽略此參數,濾鏡將不會作用。
具體操作:
為預覽地區(比如要在某個 div 中預覽)添加樣式:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);。
為 AlphaImageLoader 設定 src 屬性。
樣本檔案:
<?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>本地圖片預覽代碼(支援 IE6、IE7)</title> <style type="text/css"> #newPreview { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); } </style> <script type="text/javascript" language="javascript"> <!-- function PreviewImg(imgFile) { //原來的預覽代碼,不支援 IE7。 var oldPreview = document.getElementById("oldPreview"); oldPreview.innerHTML = ""; //新的預覽代碼,支援 IE6、IE7。 var newPreview = document.getElementById("newPreview"); newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value; newPreview.style.width = "80px"; newPreview.style.height = "60px"; } --> </script> </head> <body> <p>說明:以下針對的是互連網情況,如果您在本地作測試,比如輸入的地址是:http://127.0.0.1/...,則可以看到全部預覽。</p> <hr /> <p>如果您使用的是 IE6,則可以看到以下預覽;如果您使用的是 IE7,則看不到以下預覽。</p> <div id="oldPreview"></div> <hr /> <p>不論您使用的是 IE6 還是 IE7,均可以看到以下預覽。</p> <div id="newPreview"></div> <hr /> <p>請選擇一個圖片進行預覽:<input type="file" size="20" onchange="javascript:PreviewImg(this);" /></p> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.