手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >兼容多浏览器实现半透明(Opera ie firefox)
兼容多浏览器实现半透明(Opera ie firefox)
摘要:Clickonalinkabovetomaketheimagedisappearandre-appearbygraduallyfadingi...

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)】相关文章:

关于浏览器兼容性的讨论

多步骤进度条的实现原理及代码

CSS样式:background-position的理解

CSS不同浏览器兼容问题

使用CSS3实现圆角,阴影,透明

不同浏览器兼容的CSS编码准则

CSS兼容性问题 && CSS HACK

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

css中background-size属性使用介绍

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

精品推荐
分类导航