IE6解决png格式灰边问题.docx
- 文档编号:26716925
- 上传时间:2023-06-22
- 格式:DOCX
- 页数:15
- 大小:18.71KB
IE6解决png格式灰边问题.docx
《IE6解决png格式灰边问题.docx》由会员分享,可在线阅读,更多相关《IE6解决png格式灰边问题.docx(15页珍藏版)》请在冰豆网上搜索。
IE6解决png格式灰边问题
∙ie6对png透明图片灰边的处理方法
∙来源:
网络 标签:
ie6png透明图片
∙/*使用方法*/
∙/*
∙*
∙*
--[iflteIE6]>
∙*
∙*
∙*DD_belatedPNG.fix('img');
∙*
∙*
[endif]-->
∙*
∙*
∙**/
/*以下为DD_belatedPNG_0.0.8a.js*/
/**
*DD_belatedPNG:
AddsIE6support:
PNGimagesforCSSbackground-imageandHTML.
*Author:
DrewDiller
*Email:
drew.diller@
*URL:
*Version:
0.0.8a
*LicensedundertheMITLicense:
*
*Exampleusage:
*DD_belatedPNG.fix('.png_bg');//argumentisaCSSselector
*DD_belatedPNG.fixPng(someNode);//argumentisanHTMLDomElement
**/
/*
PLEASEREAD:
AbsolutelyeverythinginthisscriptisSILLY.Iknowthis.IE'srenderingofcertainpixelsdoesn'tmakesense,soneitherdoesthiscode!
*/
varDD_belatedPNG={
ns:
'DD_belatedPNG',
imgSize:
{},
delay:
10,
nodesFixed:
0,
createVmlNameSpace:
function(){/*enableVML*/
if(document.namespaces&&!
document.namespaces[this.ns]){
document.namespaces.add(this.ns,'urn:
schemas-microsoft-com:
vml');
}
},
createVmlStyleSheet:
function(){/*styleVML,enablebehaviors*/
/*
Justincaselotsofotherdevelopershaveadded
lotsofotherstylesheetsusingdocument.createStyleSheet
andhitthe31-limitmark,let'snotusethatmethod!
furtherreading:
*/
varscreenStyleSheet,printStyleSheet;
screenStyleSheet=document.createElement('style');
screenStyleSheet.setAttribute('media','screen');
document.documentElement.firstChild.insertBefore(screenStyleSheet,document.documentElement.firstChild.firstChild);
if(screenStyleSheet.styleSheet){
screenStyleSheet=screenStyleSheet.styleSheet;
screenStyleSheet.addRule(this.ns+'\\:
*','{behavior:
url(#default#VML)}');
screenStyleSheet.addRule(this.ns+'\\:
shape','position:
absolute;');
screenStyleSheet.addRule('img.'+this.ns+'_sizeFinder','behavior:
none;border:
none;position:
absolute;z-index:
-1;top:
-10000px;visibility:
hidden;');/*largenegativetopvalueforavoidingverticalscrollbarsforlargeimages,suggestedbyJamesO'Brien,http:
//www.thanatopsic.org/hendrik/*/
this.screenStyleSheet=screenStyleSheet;
/*Addaprint-mediastylesheet,forpreventingVMLartifactsfromshowingupinprint(includingpreview).*/
/*ThankstoR閙iPr関ostforautomatingthis!
*/
printStyleSheet=document.createElement('style');
printStyleSheet.setAttribute('media','print');
document.documentElement.firstChild.insertBefore(printStyleSheet,document.documentElement.firstChild.firstChild);
printStyleSheet=printStyleSheet.styleSheet;
printStyleSheet.addRule(this.ns+'\\:
*','{display:
none!
important;}');
printStyleSheet.addRule('img.'+this.ns+'_sizeFinder','{display:
none!
important;}');
}
},
readPropertyChange:
function(){
varel,display,v;
el=event.srcElement;
if(!
el.vmlInitiated){
return;
}
if(event.propertyName.search('background')!
=-1||event.propertyName.search('border')!
=-1){
DD_belatedPNG.applyVML(el);
}
if(event.propertyName=='style.display'){
display=(el.currentStyle.display=='none')?
'none':
'block';
for(vinel.vml){
if(el.vml.hasOwnProperty(v)){
el.vml[v].shape.style.display=display;
}
}
}
if(event.propertyName.search('filter')!
=-1){
DD_belatedPNG.vmlOpacity(el);
}
},
vmlOpacity:
function(el){
if(el.currentStyle.filter.search('lpha')!
=-1){
vartrans=el.currentStyle.filter;
trans=parseInt(trans.substring(trans.lastIndexOf('=')+1,trans.lastIndexOf(')')),10)/100;
el.vml.color.shape.style.filter=el.currentStyle.filter;/*completeguesswork*/
el.vml.image.fill.opacity=trans;/*completeguesswork*/
}
},
handlePseudoHover:
function(el){
setTimeout(function(){/*wouldn'tworkasintendedwithoutsetTimeout*/
DD_belatedPNG.applyVML(el);
},1);
},
/**
*Thisisthemethodtouseinadocument.
*@param{String}selector-REQUIRED-aCSSselector,suchas'#doc.container'
**/
fix:
function(selector){
if(this.screenStyleSheet){
varselectors,i;
selectors=selector.split(',');/*multipleselectorssupported,noneedformultiplecallstothisanymore*/
for(i=0;i this.screenStyleSheet.addRule(selectors[i],'behavior: expression(DD_belatedPNG.fixPng(this))');/*seemstoexecutethefunctionwithoutaddingittothestylesheet-interesting...*/ } } }, applyVML: function(el){ el.runtimeStyle.cssText=''; this.vmlFill(el); this.vmlOffsets(el); this.vmlOpacity(el); if(el.isImg){ this.copyImageBorders(el); } }, attachHandlers: function(el){ varself,handlers,handler,moreForAs,a,h; self=this; handlers={resize: 'vmlOffsets',move: 'vmlOffsets'}; if(el.nodeName=='A'){ moreForAs={mouseleave: 'handlePseudoHover',mouseenter: 'handlePseudoHover',focus: 'handlePseudoHover',blur: 'handlePseudoHover'}; for(ainmoreForAs){ if(moreForAs.hasOwnProperty(a)){ handlers[a]=moreForAs[a]; } } } for(hinhandlers){ if(handlers.hasOwnProperty(h)){ handler=function(){ self[handlers[h]](el); }; el.attachEvent('on'+h,handler); } } el.attachEvent('onpropertychange',this.readPropertyChange); }, giveLayout: function(el){ el.style.zoom=1; if(el.currentStyle.position=='static'){ el.style.position='relative'; } }, copyImageBorders: function(el){ varstyles,s; styles={'borderStyle': true,'borderWidth': true,'borderColor': true}; for(sinstyles){ if(styles.hasOwnProperty(s)){ el.vml.color.shape.style[s]=el.currentStyle[s]; } } }, vmlFill: function(el){ if(! el.currentStyle){ return; }else{ varelStyle,noImg,lib,v,img,imgLoaded; elStyle=el.currentStyle; } for(vinel.vml){ if(el.vml.hasOwnProperty(v)){ el.vml[v].shape.style.zIndex=elStyle.zIndex; } } el.runtimeStyle.backgroundColor=''; el.runtimeStyle.backgroundImage=''; noImg=true; if(elStyle.backgroundImage! ='none'||el.isImg){ if(! el.isImg){ el.vmlBg=elStyle.backgroundImage; el.vmlBg=el.vmlBg.substr(5,el.vmlBg.lastIndexOf('")')-5); } else{ el.vmlBg=el.src; } lib=this; if(! lib.imgSize[el.vmlBg]){/*determinesizeofloadedimage*/ img=document.createElement('img'); lib.imgSize[el.vmlBg]=img; img.className=lib.ns+'_sizeFinder'; img.runtimeStyle.cssText='behavior: none;position: absolute;left: -10000px;top: -10000px;border: none;margin: 0;padding: 0;';/*makesuretosetbehaviortononetopreventaccidentalmatchingofthehelperelements! */ imgLoaded=function(){ this.width=this.offsetWidth;/*weirdcache-bustingrequirement! */ this.height=this.offsetHeight; lib.vmlOffsets(el); }; img.attachEvent('onload',imgLoaded); img.src=el.vmlBg; img.removeAttribute('width'); img.removeAttribute('height'); document.body.insertBefore(img,document.body.firstChild); } el.vml.image.fill.src=el.vmlBg; noImg=false; } el.vml.image.fill.on=! noImg; el.vml.image.fill.color='none'; el.vml.color.shape.style.backgroundColor=elStyle.backgroundColor; el.runtimeStyle.backgroundImage='none'; el.runtimeStyle.backgroundColor='transparent'; }, /*IEcan'tfigureoutwhatdowhentheoffsetLeftandtheclientLeftaddupto1,andtheVMLendsupgettingfuzzy...sowehavetopush/enlargethingsby1pixelandthenclipofftheexcess*/ vmlOffsets: function(el){ varthisStyle,size,fudge,makeVisible,bg,bgR,dC,altC,b,c,v; thisStyle=el.currentStyle; size={'W': el.clientWidth+1,'H': el.clientHeight+1,'w': this.imgSize[el.vmlBg].width,'h': this.imgSize[el.vmlBg].height,'L': el.offsetLeft,'T': el.offsetTop,'bLW': el.clientLeft,'bTW': el.clientTop}; fudge=(size.L+size.bLW==1)? 1: 0; /*vmlshape,left,top,width,height,origin*/ makeVisible=function(vml,l,t,w,h,o){ vml.coordsize=w+','+h; vml.coordorigin=o+','+o; vml.path='m0,0l'+w+',0l'+w+','+h+'l0,'+h+'xe'; vml.style.width=w+'px'; vml.style.height=h+'px'; vml.style.left=l+'px'; vml.style.top=t+'px'; }; makeVisible(el.vml.color.shape,(size.L+(el.isImg? 0: size.bLW)),(size.T+(el.isImg? 0: size.bTW)),(size.W-1),(size.H-1),0); makeVisible(el.vml.image.shape,(size.L+size.bLW),(size.T+size.bTW),(size.W),(size.H),1); bg={'X': 0,'Y': 0}; if(el.isImg){ bg.X=parseInt(thisStyle.paddingLeft,10)+1; bg.Y=parseInt(thisStyle.paddingTop,10)+1; } else{ for(binbg){ if(bg.hasOwnProperty(b)){ this.figurePercentage(bg,size,b,thisStyle['backgroundPosition'+b]); } } } el.vml.image.fill.position=(bg.X/size.W)+','+(bg.Y/size.H); bgR=thisStyle.backgroundRepeat; dC={'T': 1,'R': size.W+fudge,'B': size.H,'L': 1+fudge};/*thesearedefaultsforrepeatofanykind*/ altC={'X': {'b1': 'L','b2': 'R','d': 'W'},'Y': {'b1': 'T','b2': 'B','d': 'H'}}; if(bgR! ='repeat'||el.isImg){ c={'T': (bg.Y),'R': (bg.X+size.w),'B': (bg.Y+size.h),'L': (bg.X)};/*thesearedefaultsforno-repeat-clipsdowntotheimagelocation*/ if(bgR.search('repeat-')! =-1){/*nowlet'sreverttodCforrepeat-xorrepeat-y*/ v=bgR.split('repeat-')[1].toUpperCase(); c[altC[v].b1]=1; c[altC[v].b2]=size[altC[v].d]; } if(c.B>size.H){ c.B=size.H; } el.vml.image.shape.style.clip='rect('+c.T+'px'+(c.R+fudge)+'px'+c.B+'px'+(c.L+fudge)+'px)'; } else{ el.vml.image.shape.style.clip='rect('+dC.T+'px'+dC.R+'px'+dC.B+'px'+dC.L+'px)'; } }, figurePercentage: functi
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- IE6 解决 png 格式 问题
![提示](https://static.bdocx.com/images/bang_tan.gif)