Clickonalinkabovetomaketheimagedisappearandre-appearbygraduallyfadingin/out.ItusesCSStransparency,inCSSyoucansetthetransparencyindifferentways.Toensurethatitworksonmostbrowsersweuseallthree.
opacity:0.5;
ThisoneistheofficialCSS3method,atthemomentitworksinnewerMozillaversions.
-moz-opacity:0.5;
ThisoneworksinolderversionsofMozillaandPhoenix/FireBird/FireFox.
-khtml-opacity:0.5;
ThisisusedbybrowsersthatusetehKHTMLrenderingengine,namelyKonquereronLinuxandSafarionMacOS.
filter:alpha(opacity=50);
ThisoneworksonlyinMSIE.
Thereisactuallyanotherone:-khtml-opacity:0.5;worksforthebrowsersKonquereronLinuxandSafarionMacOS.Youcouldaddittooifyouwanttosupporttheseusers.SomewhereinthenearfuturemostbrowserswillsupportCSS3andopacity:0.5;shouldworkeverywhere.
复制代码 代码如下:
functionopacity(id,opacStart,opacEnd,millisec){
//speedforeachframe
varspeed=Math.round(millisec/100);
vartimer=0;
//determinethedirectionfortheblending,ifstartandendarethesamenothinghappens
if(opacStart>opacEnd){
for(i=opacStart;i>=opacEnd;i--){
setTimeout("changeOpac("+i+",'"+id+"')",(timer*speed));
timer++;
}
}elseif(opacStart<opacEnd){
for(i=opacStart;i<=opacEnd;i++)
{
setTimeout("changeOpac("+i+",'"+id+"')",(timer*speed));
timer++;
}
}
}
//changetheopacityfordifferentbrowsers
functionchangeOpac(opacity,id){
varobject=document.getElementById(id).style;
object.opacity=(opacity/100);
object.MozOpacity=(opacity/100);
object.KhtmlOpacity=(opacity/100);
object.filter="alpha(opacity="+opacity+")";
}
functionshiftOpacity(id,millisec){
//ifanelementisinvisible,makeitvisible,elsemakeitivisible
if(document.getElementById(id).style.opacity==0){
opacity(id,0,100,millisec);
}else{
opacity(id,100,0,millisec);
}
}
functionblendimage(divid,imageid,imagefile,millisec){
varspeed=Math.round(millisec/100);
vartimer=0;
//setthecurrentimageasbackground
document.getElementById(divid).style.backgroundImage="url("+document.getElementById(imageid).src+")";
//makeimagetransparent
changeOpac(0,imageid);
//makenewimage
document.getElementById(imageid).src=imagefile;
//fadeinimage
for(i=0;i<=100;i++){
setTimeout("changeOpac("+i+",'"+imageid+"')",(timer*speed));
timer++;
}
}
functioncurrentOpac(id,opacEnd,millisec){
//standardopacityis100
varcurrentOpac=100;
//iftheelementhasanopacityset,getit
if(document.getElementById(id).style.opacity<100){
currentOpac=document.getElementById(id).style.opacity*100;
}
//callforthefunctionthatchangestheopacity
opacity(id,currentOpac,opacEnd,millisec)
}
更多参考
http://www.brainerror.net/scripts_js_blendtrans.php
http://realazy.org/blog/2006/03/21/ie-firefox-opera-alpha-transparency/
http://alistapart.com/stories/pngopacity/