javascript - 更改图片加载

Question

我有一个简单的网页，主页上的一个 div 中有一个图像，我想在页面加载(仅一次)后使用缓慢淡入淡出来使用 javascript 将图像更改为替代图像，我目前正在使用动画 gif 来执行此操作，但更愿意使用 javascript。

我的 JavaScript 技能有限。

谢谢

Answer 1

我假设您不会使用 jQuery，所以我创建了简单的 js 示例，它在加载页面后淡出一张图像并淡入另一张图像。您可以在此处查看示例 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);

});