爱悠闲 > 解决IE下图片渐隐渐现效果,图片出现“坏点”的bug

解决IE下图片渐隐渐现效果,图片出现“坏点”的bug

分类: JavaScript  |  标签: ie,filter,javascript,opera,chrome,div  |  作者: zi_jin 相关  |  发布日期 : 2015-07-01  |  热度 : 916°

 QQLive新版官网首页顶部有个焦点图,巨幅图片以渐隐渐现的效果动画切换。这里没有使用Flash来实现,而是直接使用Javascript来控制。

 

 

【图片没有了,去链接地址上面看吧,就是那个每隔5秒切换一次的大图】

 

用js实现这个效果并不困难,我的方案是每隔指定时间让透明度+0.1,直到1。当然,IE下需要换成0~100范围。

但是这里出现了一个问题,由于图片比较大,在IE内核的浏览器里切换的时候,图片部分位置会出现“坏点”(很像显示器上的坏点):

 

经过试验,只要图片足够大,给图片的style加上filter就会有坏点,去掉filter就没有问题。这个问题在FF、Chrome、opera下都不存在,只有IE下有。而且即使用div包住图片,div设filter也不行,把图片搞成背景图仍然有问题。

最后换了一种方案,不是图片加了filter就会有坏点吗?那就不给图片加filter,不让图片从透明变成不透明,而是在上面罩一个层,让这个层由不透明变成透明,完全透明的时候就把这个层display:none。

修改js代码,轻松搞定,没有坏点了,切换效果和先前一模一样。