解決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代碼,輕鬆搞定,沒有壞點了,切換效果和先前一模一樣。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章