PNGHandler - JS を使用して IE 上で PNG 画像を透明にする (背景画像を含む)_JavaScript スキル

PNG.JS代コード：
// PNGHandler: オブジェクト指向 JavaScriptベース PNG ラッパー
// -------------------------------------- -----------------------------
// バージョン 1.1.20031218
// コード by Scott Sciller - www.schillmania.com
// ----------------------------------------------------- ----------------
// 説明:
//
// PNG がネイティブ または フィルタ経由でサポートされている場合に、グレースフル デグレード PNG 機能を提供します（くそー、IE!)
// 画像として PNG および背景画像として DIV を使用できるはずです。

function PNGHandler() {
var self = this;

this.na = navigator.appName.toLowerCase();
this.nv = navigator.appVersion.toLowerCase();
this.isIE = this.na.indexOf('internet explorer') 1?1:0;
this.isWin = this.nv.indexOf('windows') 1?1:0;
this.ver = this.isIE?parseFloat(this.nv.split('msie ')[1]):parseFloat(this.nv);
this.isMac = this.nv.indexOf('mac') 1?1:0;
this.isOpera = (navigator.userAgent.toLowerCase().indexOf('opera ') 1 || navigator.userAgent.toLowerCase().indexOf('opera/') 1);
if (this.isOpera) this.isIE = false; // Opera フィルター キャッチ (これは卑劣で、デフォルトでは IE であるふりをします)

this.transform = null;

this.getElementsByClassName = function(className,oParent) {
doc = (oParent||document);
一致 = [];
ノード = doc.all||doc.getElementsByTagName('*');
for (i=0; i if (nodes[i].className == className || nodes[i].className.indexOf(className) 1 || nodes[ i].className.indexOf(className ' ') 1 || nodes[i].className.indexOf(' ' className) 1) {
matches[matches.length] = nodes[i];
}
}
一致を返します。 // 子供たち、火遊びをしないでください。 ;)
}

this.filterMethod = function(oOld) {
// IE 5.5 独自の フィルタ ガベージ (ブー!)
// 古い要素に基づいて新しい要素を作成します。 それ以外の場合は適切にレンダリングされないようです（フィルタのため？）
// 独自の「currentStyle」オブジェクトを使用するため、CSS 経由で継承されたルールが選択されます。

var o = document.createElement('div'); // oOld.nodeName
var filterID = 'DXImageTransform.Microsoft.AlphaImageLoader';
// o.style.width = oOld.currentStyle.width;
// o.style.height = oOld.currentStyle.height;

if (oOld.nodeName == 'DIV') {
var b = oOld.currentStyle.backgroundImage.toString(); // 背景画像 URL
oOld.style.backgroundImage = 'none'; を解析します。
// currentStyleオブジェクトから背景画像URLを解析します。
var i1 = b.indexOf('url("') 5;
var newSrc = b.substr(i1,b.length-i1-2).replace('.gif','.png' ); // ") の最初のインスタンスを検索します (", 文字列から切り出します
o = oOld;
o.style.writingMode = 'lr-tb'; // 適用する必要があるため、フィルターを適用します"と表示されます。真剣に。http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp?frame=true
o.style.filter = "progid:" filterID を参照してください。 "(src='" newSrc "',sizingMethod='crop')";
// 古い（既存の）要素を新しい（作成したばかりの）要素に置き換えます。
// oOld.parentNode.replaceChild(o) ,o古い);
} else if (oOld.nodeName == 'IMG') {
var newSrc = oOld.getAttribute('src').replace('.gif','.png');
// フィルターを適用
oOld.src = 'none.gif'; // 画像を削除します
oOld.style.filter = "progid:" filterID "(src='" newSrc "',sizingMethod='crop')";
oOld.style.writingMode = 'lr-tb'; // 適用する必要があるため、フィルター「レイアウトあり」が表示されます。 真剣に。 http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp?frame=true
}
}

this.pngMethod = function(o ) {
// ネイティブの透明性サポート。 実装は簡単です。 (うわー!)
bgImage = this.getBackgroundImage(o);
if (bgImage) {
// 背景画像を設定し、.gif を置き換えます
o.style.backgroundImage = 'url(' bgImage.replace('.gif','.png') ')' ;
} else if (o.nodeName == 'IMG') {
o.src = o.src.replace('.gif','.png');
} else if (!this.isMac) {
// window.status = 'PNGHandler.applyPNG(): ノードは DIV または IMG ではありません。';
}
}

this.getBackgroundImage = function(o) {
var b, i1; // 背景関連の変数
var bgUrl = null;

if (o.nodeName == 'DIV' && !(this.isIE && this.isMac)) { // ie:mac PNG サポート PNG 背景を持つ DIV では壊れています
if (document.defaultView) ) {
if (document.defaultView.getComputedStyle) {
b = document.defaultView.getComputedStyle(o,'').getPropertyValue('background-image');
i1 = b.indexOf('url(') 4;
bgUrl = b.substr(i1,b.length-i1-1);
} else {
// 計算されたスタイルはありません
}
} else {
// デフォルトビューなし
}
}
return
}

this.supportTest = function() {
// 使用するメソッドを決定します。
// IE 5.5 /win32: filter

if (this.isIE && this.isWin && this.ver >= 5.5) {
// IE 独自のフィルタ メソッド（DXFilter 経由）
self.transform = self.filterMethod;
} else if (!this.isIE && this.ver self.transform =
// PNG サポートなし、またはサポート切れ
// 既存のコンテンツを現状のままにしておく
} else if (!this.isIE && this.ver >= 5 || (this.isIE && this.isMac && this. ver >= 5)) { // version 5 browser (IE ではない)、または IE:mac 5
self.transform = self.pngMethod;
// おそらく PNG サポートはありません。代わりに、
self.transform = null;
return
}

this.init = function() {
if (this.supportTest()) {
this.elements = this.getElementsByClassName('png');
for (var i=0; i this.transform(this.elements[i]);
}
} }

}

// PNG ハンドラーをインスタンス化して初期化します

var pngHandler = new PNGHandler();

デモ页HTML代番号：










PNG (画像)

PNG (背景画像付きの div)

<script></script>ソースコード及びデモ打包下ダウンロード： <script></script><script> <BR> pngHandler.init(); <BR> </script>本地下ダウンロード<script> <BR> pngHandler.init(); <BR></script>