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/

【兼容多浏览器实现半透明(Opera ie firefox)】相关文章：

★ 浏览器不支持position: fix的解决

★ IE8 滤镜效果filter:alpha(opacity=20);IE下失效出现黑色

★ 屏蔽双击选中文字的方法兼容FF及以外的浏览器

★ 兼容各浏览器：CSS定义PNG透明效果

★ 区别不同浏览器CSS hack:区分IE6，IE7，IE8，firefox

★ 最全的CSS浏览器兼容问题

★ 如何用!important解决浏览器兼容性问题

★ 彻底清除浏览器js和css缓存的方法

★ css代码兼容浏览器技巧总结

★ CSS兼容IE6、IE7、IE8和Firefox浏览器的方法