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

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

 

 

【图片没有了，去http://live.qq.com上面看吧，就是那个每隔5秒切换一次的大图】

 

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

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

 

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

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

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