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);

});

更改图像onload

1 个答案: