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">
</div>
<scripttype="text/javascript">
pngHandler.init();
</script>
</body>
</html>
源码及DEMO打包下载：
本地下载
网站建设 IT知识 IT知识教程 PNGHandler-借助JS让PNG图在IE下实现透明（包括背景图） 
最新文章
热门文章
猜你喜欢
