改變圖像

Question

我有一個簡單的網頁，在主頁div上的圖像，並希望使用javascript來更改圖像的替代圖像後，頁面加載（只有一次）使用慢衰落，我我目前正在使用動畫GIF來做到這一點，但寧願使用JavaScript。

我的javascript技能有限。

感謝

Answer 1

我假設你不會使用jQuery，所以我已經創建了簡單的js eample其淡出一個圖像和頁面加載後在其他變淡。你可以查看這裏的例子http://jsfiddle.net/rJzPV/7/

function fadeOut(elem, time, callbackFn) { 
    var startOpacity = elem.style.opacity || 1; 
    elem.style.opacity = startOpacity; 

    (function go() { 
     elem.style.opacity -= startOpacity/(time/100); 

     // for IE 
     elem.style.filter = 'alpha(opacity=' + elem.style.opacity * 100 + ')'; 

     if (elem.style.opacity > 0.11) 
      setTimeout(go, 100); 
     else { 
      elem.style.display = 'none'; 
      if (callbackFn) 
       callbackFn(); 
     } 
    })(); 
} 

function fadeIn(elem, time) { 
    var startOpacity = 0.1; 
    elem.style.opacity = startOpacity; 
    elem.style.display = ""; 
    (function go() { 
     elem.style.opacity -= -startOpacity/(time/1000); 

     // for IE 
     elem.style.filter = 'alpha(opacity=' + elem.style.opacity * 100 + ')'; 

     if (elem.style.opacity < 1) 
      setTimeout(go, 100); 
    })(); 
} 

window.addEvent('load', function() { 
    function changePicture() { 
     var _myImg = document.getElementById("myImage"); 
     _myImg.src = "http://www.google.com/logos/2012/klimt12-hp.jpg"; 
     fadeIn(_myImg, 1000); 
    } 

    var _myImg = document.getElementById("myImage"); 
    fadeOut(_myImg, 1000, changePicture); 

});