Solved the problem of gradually fading images in IE, and the image encountered a "bad point" bug.

There is a focus chart at the top of the homepage of the new official website of qqlive, and the large images are switched with the effect animation that gradually fades in. Flash is not used here, But Javascript is directly used for control.

 

 

[Picture No, go to the http://live.qq.com above look, that is the switching every 5 seconds a big picture]

 

It is not difficult to implement this effect using Js. My solution is to make transparency + 0.1 at a specified time until 1. Of course, replace IE with 0 ~ The value range is 100.

However, there is a problem here. Because the picture is large, when switching in the IE kernel browser, some of the pictures will show "bad points" (similar to the bad points on the display ):

 

After the experiment, as long as the image is large enough, adding filter to the image style will have a bad point, removing the filter will be no problem. This problem does not exist in FF, chrome, and opera, but only in IE. In addition, the DIV is used to wrap the image, and the DIV cannot set the filter. There is still a problem in making the image into a background image.

Finally, I changed a scheme. Isn't it a bad point to add filter to the image? Then, we will not apply a filter to the image, so that the image will not change from transparent to transparent. Instead, we will apply the display: None layer to transparent layers on the mask.

Modify JSCode, Easy to handle, no bad points, the switching effect is exactly the same as before.