PNG.JS代码：
//PNGHandler:Object-OrientedJavascript-basedPNGwrapper
//--------------------------------------------------------
//Version1.1.20031218
//CodebyScottSchiller-www.schillmania.com
//--------------------------------------------------------
//Description:
//Providesgracefully-degradingPNGfunctionalitywhere
//PNGissupportednativelyorviafilters(Damnyou,IE!)
//ShouldworkwithPNGsasimagesandDIVbackgroundimages.
functionPNGHandler(){
varself=this;
this.na=navigator.appName.toLowerCase();
this.nv=navigator.appVersion.toLowerCase();
this.isIE=this.na.indexOf('internetexplorer')+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;//Operafiltercatch(whichissneaky,pretendingtobeIEbydefault)
this.transform=null;
this.getElementsByClassName=function(className,oParent){
doc=(oParent||document);
matches=[];
nodes=doc.all||doc.getElementsByTagName('*');
for(i=0;i<nodes.length;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];
}
}
returnmatches;//kids,don'tplaywithfire.;)
}
this.filterMethod=function(oOld){
//IE5.5+proprietaryfiltergarbage(boo!)
//Createnewelementbasedonoldone.Doesn'tseemtorenderproperlyotherwise(duetofilter?)
//useproprietary"currentStyle"object,sorulesinheritedviaCSSarepickedup.
varo=document.createElement('div');//oOld.nodeName
varfilterID='DXImageTransform.Microsoft.AlphaImageLoader';
//o.style.width=oOld.currentStyle.width;
//o.style.height=oOld.currentStyle.height;
if(oOld.nodeName=='DIV'){
varb=oOld.currentStyle.backgroundImage.toString();//parseoutbackgroundimageURL
oOld.style.backgroundImage='none';
//ParseoutbackgroundimageURLfromcurrentStyleobject.
vari1=b.indexOf('url("')+5;
varnewSrc=b.substr(i1,b.length-i1-2).replace('.gif','.png');//findfirstinstanceof")after(",chopfromstring
o=oOld;
o.style.writingMode='lr-tb';//Hastobeappliedsofilter"haslayout"andisdisplayed.Seriously.Refertohttp://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp?frame=true
o.style.filter="progid:"+filterID+"(src='"+newSrc+"',sizingMethod='crop')";
//Replacetheold(existing)withthenew(justcreated)element.
//oOld.parentNode.replaceChild(o,oOld);
}elseif(oOld.nodeName=='IMG'){
varnewSrc=oOld.getAttribute('src').replace('.gif','.png');
//applyfilter
oOld.src='none.gif';//getridofimage
oOld.style.filter="progid:"+filterID+"(src='"+newSrc+"',sizingMethod='crop')";
oOld.style.writingMode='lr-tb';//Hastobeappliedsofilter"haslayout"andisdisplayed.Seriously.Refertohttp://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp?frame=true
}
}
this.pngMethod=function(o){
//Nativetransparencysupport.Easytoimplement.(woo!)
bgImage=this.getBackgroundImage(o);
if(bgImage){
//setbackgroundimage,replacing.gif
o.style.backgroundImage='url('+bgImage.replace('.gif','.png')+')';
}elseif(o.nodeName=='IMG'){
o.src=o.src.replace('.gif','.png');
}elseif(!this.isMac){
//window.status='PNGHandler.applyPNG():NodeisnotaDIVorIMG.';
}
}
this.getBackgroundImage=function(o){
varb,i1;//background-relatedvariables
varbgUrl=null;
if(o.nodeName=='DIV'&&!(this.isIE&&this.isMac)){//ie:macPNGsupportbrokenforDIVswithPNGbackgrounds
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{
//nocomputedstyle
}
}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>
<>
<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打包下载：
本地下载