FireFox火狐浏览器与IE兼容问题 – 透明滤镜 DIV滚动条

2020-05-11 08:09:40易采站长站整理

以下是我的动画切换效果,在IE下正常,到了火狐里面就不动了,修改后可以切换图片但渐隐渐现的效果就没有了。原因是火狐不支持滤镜filter,只好用半透明的div来实现了。

/*
company page
*/
function playcompanyimg()
{

window.setInterval(‘changecompanyimg();’, interval);
}
function changecompanyimg()
{
/*
火狐下面不支持document.all属性的,必需用document.getElementById(‘idName’);
*/
//if (document.all)
//{

/**
以下两句是在切换效果前切换背景图片的代码,number、image和idtemp要设置全局变量才可以
*/
   number = Math.floor(Math.random() * image.length);
idtemp.src=image[number];
//alert(number+" ii "+idtemp.src)
/**
以下两句是实现幻灯片切换效果的
*/
//alert(do_transition);
//document.all.companyimg.style.filter="progid:DXImageTransform.Microsoft.Fade(duration=2,overlap=0.4)";
/*
document.all.companyimg.style.filter="progid:DXImageTransform.Microsoft.Fade(duration=1,overlap=1)";
document.all.companyimg.filters[0].Apply();
document.all.companyimg.filters[0].Play();
*/
var companyimgidtmep = document.getElementById(‘companyimg’);
companyimgidtmep.style.filter="progid:DXImageTransform.Microsoft.Fade(duration=1,overlap=1)";
companyimgidtmep.filters[0].Apply();
companyimgidtmep.filters[0].Play();
//}
}

参考资料:核心:FILTER:revealTrans(duration=1,transition=23); 一个IE滤镜,

在其它的非IE浏览器虽然不支持这个滤镜,但是支持透明滤镜的,你可以分一下,IE下继续使用你这个效果,而在非IE浏览器下用透明滤镜:

style.opacity
opacity = 0.5 CSS3

style.MozOpacity
-moz-opacity: 0.5 Mozilla 里等同上面这个滤镜 这个滤镜也适用于Netscape

style.KHTMLOpacity
-khtml-opacity: 0.5 Safari 里的透明滤镜。

IE:
obj.filters.alpha.opacity

to meizz(梅花雪)
其实我想过你那个问题的。但是透明 opacity 这个他不是一个渐变的过程。
一般这种图片过度特效最多持续一秒把,最多最多两秒 duration=2
超过2秒就很累赘,喧宾夺主了。
在2秒钟里面实现
g_img.style.filter="alpha(opacity="+i+")" 透明度的变化是比较累赘的事情。
要用 window.setInterval 改变 i 的值, 而且还要调用几十上百次window.setInterval
才能看到效果。
这样的话,我觉得得不赔失,是为了特效而特效了

另外一种考虑是,毕竟非IE浏览器是少数,即使在FireFox(火狐)下 没有图片过度特效,其实也没什么,
还是很流畅,不过就是看不到IE里面的美而已。

问题十一:FireFox(火狐)下链接的onclick事件不起作用