PNGHandler-借助JS让PNG图在IE下实现透明（包括背景图）

时间：2021-05-26

PNG.JS代码：
//PNGHandler:Object-OrientedJavascript-basedPNGwrapper
//--------------------------------------------------------
//Version1.1.20031218
//CodebyScottSchiller-putedstyle
}
}else{
//nodefaultview
}
}
returnbgUrl;
}

this.supportTest=function(){
//Determinemethodtouse.
//IE5.5+/win32:filter

if(this.isIE&&this.isWin&&this.ver>=5.5){
//IEproprietaryfiltermethod(viaDXFilter)
self.transform=self.filterMethod;
}elseif(!this.isIE&&this.ver<5){
self.transform=null;
//NoPNGsupportorbrokensupport
//Leaveexistingcontentas-is
}elseif(!this.isIE&&this.ver>=5||(this.isIE&&this.isMac&&this.ver>=5)){//version5+browser(notIE),orIE:mac5+
self.transform=self.pngMethod;
}else{
//PresumablynoPNGsupport.GIFusedinstead.
self.transform=null;
returnfalse;
}
returntrue;
}

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

}

//InstantiateandinitializePNGHandler

varpngHandler=newPNGHandler();

DEMO页HTML代码：
<html>
<head>
<title>Schillmania!|png.jsdemo</title>
<scripttype="text/javascript"src="png.js"></script>
</head>

<body>

<!--

Don'tcopythisparthere,thisisjustforyourinformation.

//Requiredunderthe<head>tag:

<scripttype="text/javascript"src="png.js"></script>

//Requiredinthe<body>tag:

<imgsrc="your-image.gif"class="png"style="width:XXXpx;height:YYYpx"/>

//..WhereXXXandYYYarethewidth/heightofyourimage.Withoutwidth/heightthePNGwon'tworkunderIE:win32.

//Requiredbeforethe</body>tag(butafterallofyourcontent):

<scripttype="text/javascript">
pngHandler.init();
</script>

//Thisjavascriptblockshouldbeputatthebottomofyourpage,insidethe<body>andbefore</body>.
//ItcallsthelibraryandreplacestheGIFimages(ifapplicable)beforethepagehasloaded(andbeforetheGIFhasloaded,Sotheuserdoesn'tload2imagesforeachPNGyouwanttoreplace.)
//Ifyoudon'tputitafterallofyourcontent,itmaydostrangethingsandmisssomeimages.

-->

<h1>PNG(img)</h1>

<imgsrc="foo.gif"alt=""class="png"style="width:220px;height:100px"/>

<h1>PNG(divwithbackgroundimage)</h1>

<divclass="png"style="width:220px;height:100px;background-image:url(foo.gif);background-repeat:no-repeat">
&nbsp;
</div>

<scripttype="text/javascript">
pngHandler.init();
</script>

</body>
</html>

源码及DEMO打包下载：
本地下载

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章