看到你,梁松远的博客

位置 » 主页 » 代码分享 » 让万恶的IE6测底兼容PNG透明效果,一个JS文件解决《DD_belatedPNG.js》

让万恶的IE6测底兼容PNG透明效果,一个JS文件解决《DD_belatedPNG.js》

IE6真是个头痛的问题,不过它服役了这么多年,也快要退休了,最后再给它点活力。

网上关于IE6的png透明效果方法有很多,其中的方法我就不一一列出来了,这里我只记录我使用的一种方法,操作简单,不用考虑太多问题,只要在需要透明的页面加上一段代码,就一切OK,绝对好用。

不说太多,你如果想全站通用,可以把代码放在共用文件中,比如头部、尾部等全站公用的模板中。

引用的JS文件叫做:DD_belatedPNG.js

源码如下,你不需要理解代码如何工作都行,直接使用就ok

// JavaScript Document
/**
* DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML .
* Author: Drew Diller
* Email: drew.diller@gmail.com
* URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/
* Version: 0.0.8a
* Licensed under the MIT License: http://dillerdesign.com/experiment/DD_belatedPNG/#license
*
* Example usage:
* DD_belatedPNG.fix('.png_bg'); // argument is a CSS selector
* DD_belatedPNG.fixPng( someNode ); // argument is an HTMLDomElement
**/
var DD_belatedPNG={
ns:"DD_belatedPNG",
imgSize:{},
delay:10,
nodesFixed:0,
createVmlNameSpace:function(){
if(document.namespaces&&!document.namespaces[this.ns]){
document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")
}
},
createVmlStyleSheet:function(){
var b,a;
b=document.createElement("style");
b.setAttribute("media","screen");
document.documentElement.firstChild.insertBefore(b,document.documentElement.firstChild.firstChild);
if(b.styleSheet){
b=b.styleSheet;
b.addRule(this.ns+"\\:*","{behavior:url(#default#VML)}");
b.addRule(this.ns+"\\:shape","position:absolute;");
b.addRule("img."+this.ns+"_sizeFinder","behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;");
this.screenStyleSheet=b;
a=document.createElement("style");
a.setAttribute("media","print");
document.documentElement.firstChild.insertBefore(a,document.documentElement.firstChild.firstChild);
a=a.styleSheet;
a.addRule(this.ns+"\\:*","{display: none !important;}");
a.addRule("img."+this.ns+"_sizeFinder","{display: none !important;}")
}
},
readPropertyChange:function(){
var b,c,a;b=event.srcElement;
if(!b.vmlInitiated){
return
}
if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){
DD_belatedPNG.applyVML(b)
}
if(event.propertyName=="style.display"){
c=(b.currentStyle.display=="none")?"none":"block";
for(a in b.vml){
if(b.vml.hasOwnProperty(a)){
b.vml[a].shape.style.display=c
}
}
}
if(event.propertyName.search("filter")!=-1){
DD_belatedPNG.vmlOpacity(b)
}
},
vmlOpacity:function(b){
if(b.currentStyle.filter.search("lpha")!=-1){
var a=b.currentStyle.filter;
a=parseInt(a.substring(a.lastIndexOf("=")+1,a.lastIndexOf(")")),10)/100;
b.vml.color.shape.style.filter=b.currentStyle.filter;b.vml.image.fill.opacity=a
}
},
handlePseudoHover:function(a){
setTimeout(function(){
DD_belatedPNG.applyVML(a)
},1)
},
fix:function(a){
if(this.screenStyleSheet){
var c,b;
c=a.split(",");
for(b=0;b<c.length;b++){ this.screenStyleSheet.addRule(c[b],"behavior:expression(DD_belatedPNG.fixPng(this))") } } }, applyVML:function(a){ a.runtimeStyle.cssText=""; this.vmlFill(a); this.vmlOffsets(a); this.vmlOpacity(a); if(a.isImg){ this.copyImageBorders(a) } }, attachHandlers:function(i){ var d,c,g,e,b,f;d=this; c={ resize:"vmlOffsets",move:"vmlOffsets" }; if(i.nodeName=="A"){ e={ mouseleave:"handlePseudoHover", mouseenter:"handlePseudoHover", focus:"handlePseudoHover", blur:"handlePseudoHover" }; for(b in e){ if(e.hasOwnProperty(b)){ c[b]=e[b] } } } for(f in c){ if(c.hasOwnProperty(f)){ g=function(){ d](i) }; i.attachEvent("on"+f,g) } } i.attachEvent("onpropertychange",this.readPropertyChange) }, giveLayout:function(a){ a.style.zoom=1; if(a.currentStyle.position=="static"){ a.style.position="relative" } }, copyImageBorders:function(b){ var c,a; c={ borderStyle:true, borderWidth:true, borderColor:true }; for(a in c){ if(c.hasOwnProperty(a)){ b.vml.color.shape.style[a]=b.currentStyle[a] } } }, vmlFill:function(e){ if(!e.currentStyle){ return }else{ var d,f,g,b,a,c; d=e.currentStyle } for(b in e.vml){ if(e.vml.hasOwnProperty(b)){ e.vml[b].shape.style.zIndex=d.zIndex } } e.runtimeStyle.backgroundColor=""; e.runtimeStyle.backgroundImage=""; f=true; if(d.backgroundImage!="none"||e.isImg){ if(!e.isImg){ e.vmlBg=d.backgroundImage; e.vmlBg=e.vmlBg.substr(5,e.vmlBg.lastIndexOf('")')-5) }else{ e.vmlBg=e.src } g=this; if(!g.imgSize[e.vmlBg]){ a=document.createElement("img"); g.imgSize[e.vmlBg]=a; a.className=g.ns+"_sizeFinder"; a.runtimeStyle.cssText="behavior:none; position:absolute; left:-10000px; top:-10000px; border:none; margin:0; padding:0;"; c=function(){ this.width=this.offsetWidth; this.height=this.offsetHeight; g.vmlOffsets(e) }; a.attachEvent("onload",c); a.src=e.vmlBg;a.removeAttribute("width"); a.removeAttribute("height"); document.body.insertBefore(a,document.body.firstChild) } e.vml.image.fill.src=e.vmlBg;f=false } e.vml.image.fill.on=!f; e.vml.image.fill.color="none"; e.vml.color.shape.style.backgroundColor=d.backgroundColor; e.runtimeStyle.backgroundImage="none"; e.runtimeStyle.backgroundColor="transparent" }, vmlOffsets:function(d){ var h,n,a,e,g,m,f,l,j,i,k; h=d.currentStyle; n={ W:d.clientWidth+1, H:d.clientHeight+1, w:this.imgSize[d.vmlBg].width, h:this.imgSize[d.vmlBg].height, L:d.offsetLeft, T:d.offsetTop, bLW:d.clientLeft, bTW:d.clientTop }; a=(n.L+n.bLW==1)?1:0; e=function(b,p,q,c,s,u){ b.coordsize=c+","+s; b.coordorigin=u+","+u; b.path="m0,0l"+c+",0l"+c+","+s+"l0,"+s+" xe"; b.style.width=c+"px"; b.style.height=s+"px"; b.style.left=p+"px"; b.style.top=q+"px"}; e(d.vml.color.shape,(n.L+(d.isImg?0:n.bLW)),(n.T+(d.isImg?0:n.bTW)),(n.W-1),(n.H-1),0); e(d.vml.image.shape,(n.L+n.bLW),(n.T+n.bTW),(n.W),(n.H),1); g={ X:0,Y:0 }; if(d.isImg){ g.X=parseInt(h.paddingLeft,10)+1; g.Y=parseInt(h.paddingTop,10)+1 }else{ for(j in g){ if(g.hasOwnProperty(j)){ this.figurePercentage(g,n,j,h["backgroundPosition"+j]) } } } d.vml.image.fill.position=(g.X/n.W)+","+(g.Y/n.H); m=h.backgroundRepeat; f={ T:1,R:n.W+a,B:n.H,L:1+a }; l={ X:{ b1:"L",b2:"R",d:"W" }, Y:{ b1:"T",b2:"B",d:"H" } }; if(m!="repeat"||d.isImg){ i={ T:(g.Y),R:(g.X+n.w),B:(g.Y+n.h),L:(g.X) }; if(m.search("repeat-")!=-1){ k=m.split("repeat-")[1].toUpperCase(); i[l[k].b1]=1; i[l[k].b2]=n[l[k].d] } if(i.B>n.H){
i.B=n.H
}
d.vml.image.shape.style.clip="rect("+i.T+"px "+(i.R+a)+"px "+i.B+"px "+(i.L+a)+"px)"
}else{
d.vml.image.shape.style.clip="rect("+f.T+"px "+f.R+"px "+f.B+"px "+f.L+"px)"
}
},
figurePercentage:function(d,c,f,a){
var b,e;
e=true;
b=(f=="X");
switch(a){
case"left":case"top":d[f]=0;break;
case"center":d[f]=0.5;break;
case"right":case"bottom":d[f]=1;break;
default:if(a.search("%")!=-1){
d[f]=parseInt(a,10)/100
}else{
e=false
}
}
d[f]=Math.ceil(e?((c[b?"W":"H"]*d[f])-(c[b?"w":"h"]*d[f])):parseInt(a,10));
if(d[f]%2===0){
d[f]++
}
return d[f]
},
fixPng:function(c){
c.style.behavior="none";var g,b,f,a,d;
if(c.nodeName=="BODY"||c.nodeName=="TD"||c.nodeName=="TR"){
return
}
c.isImg=false;
if(c.nodeName=="IMG"){
if(c.src.toLowerCase().search(/\.png$/)!=-1){
c.isImg=true;
c.style.visibility="hidden"
}else{
return
}
}else{
if(c.currentStyle.backgroundImage.toLowerCase().search(".png")==-1){
return
}
}
g=DD_belatedPNG;
c.vml={
color:{},
image:{}
};
b={
shape:{},
fill:{}
};
for(a in c.vml){
if(c.vml.hasOwnProperty(a)){
for(d in b){
if(b.hasOwnProperty(d)){
f=g.ns+":"+d;c.vml[a][d]=document.createElement(f)
}
}
c.vml[a].shape.stroked=false;
c.vml[a].shape.appendChild(c.vml[a].fill);
c.parentNode.insertBefore(c.vml[a].shape,c)
}
}
c.vml.image.shape.fillcolor="none";
c.vml.image.fill.type="tile";
c.vml.color.fill.on=false;
g.attachHandlers(c);
g.giveLayout(c);
g.giveLayout(c.offsetParent);
c.vmlInitiated=true;
g.applyVML(c)
}
};
try{
document.execCommand("BackgroundImageCache",false,true)
}
catch(r){}
DD_belatedPNG.createVmlNameSpace();
DD_belatedPNG.createVmlStyleSheet();

 

//上面是js代码,下面的html引用代码
<!– 透明样式 –>
<!–[if IE 6]>
//判断IE6浏览器
<script type=”text/javascript” src=”js/DD_belatedPNG.js” ></script>
//引入样式文件
<script type=”text/javascript”>
//DD_belatedPNG.fix是入口,使用方法是DD_belatedPNG.fix(‘这里填写你需要设置透明的标签,容器的id或者是class’,多个使用,隔开)
//例如下面是要让#logo、#banner两个的png透明,写法是
DD_belatedPNG.fix(‘#logo,#banner’);
</script>
<![endif]–></code>
<div id=”logo”>logo</div>
<div id=”banner”>banner</div>

设置完毕,现在可以尽情使用了,IE6png透明效果到此解决,查看demo请在ie6下测试
附上demo,你可以猛击这里查看demo