多个Image fadeIn onLoad(同时) [英] Multiple Image fadeIn onLoad (at the same time)

问题描述

我想在页面加载的同时淡入多张图像.就像这个网站一样: http://www.struckaxiom.com/work .我有只在一张图像上执行脚本的脚本，但是我想包含更多图像. 这是单张照片脚本.请帮忙.

I want to fade in multiple images at the same time as the page loads. Just like this website does it: http://www.struckaxiom.com/work. I have the script to do it only on one image, but I want to have more images included. This is the single photo script. Please help.

document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>");


function initImage() {
    imageId = 'thephoto'
    image = document.getElementById(imageId);
    setOpacity(image, 0);
    image.style.visibility = "visible";
    fadeIn(imageId,ImageId2,0);
}
function fadeIn(objId, opacity) {
    if (document.getElementById) {
        obj = document.getElementById(objId);
        if (opacity <= 100) {
            setOpacity(obj, opacity);
            opacity += 10;
            window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
        }
    }
}
function setOpacity(obj, opacity) {
    opacity = (opacity == 100)?99.999:opacity;
    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;
    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()} 
// -->

</script>

谢谢！

推荐答案

仅需要简单的数组和循环.

Simple array and loop are all you need.

首先，在代码顶部添加这样的数组:

First, add such array on top of the code:

var images = [ "thephoto1", "thephoto2", "thephoto3" ];

(带有所有所需图像的ID)

(With the ID of all desired images)

接下来将函数名称更改为initImages以反映以下事实:它将初始化多个图像，并最终添加该循环:

Next change the function name to initImages to reflect the fact it will initialize more than one image and finally add that loop:

function initImages() {
    for (var i = 0; i < images.length; i++) {
        imageId = images[i];
        image = document.getElementById(imageId);
        setOpacity(image, 0);
        image.style.visibility = "visible";
        fadeIn(imageId, 0);
    }
}

就是这样，无需触摸其他功能.

That's it, no need to touch the other functions.

带有可爱猫咪的实时测试用例: http://jsfiddle.net/yahavbr/e863X/ :-)

Live test case with cute cats: http://jsfiddle.net/yahavbr/e863X/ :-)

这篇关于多个Image fadeIn onLoad(同时)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！