多个图像淡入onLoad（同时）

Question

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

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>

谢谢！

Answer 1

简单的数组和循环就足够了。

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

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

包含所有所需图像的 ID）

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

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

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

可爱的猫的现场测试用例：http://jsfiddle.net/yahavbr/e863X/ :-)

Answer 2

您可以将所有图像包装在一个容器中，如下所示：

<div id="imageContainer">
    <img src="img1.jpg">
    <img src="img2.jpg">
    <img src="img2.jpg">
</div>

将 CSS 更改为：

<style type='text/css'>#imageContainer {visibility:hidden;}</style>

将第一个函数更改为：

function initImage() {
    containerId = 'imageContainer'
    container = document.getElementById(containerId);
    setOpacity(container, 0);
    container.style.visibility = "visible";
    fadeIn(containerId,0);
}

通过在容器上运行淡入淡出效果，您可以向容器添加尽可能多的内容，这一切都会一起淡入，你永远不需要更新你的代码。

Answer 3

他们的做法是使用 jQuery（一个优秀的实现）。所有图像都位于同一个容器中，并使用 jQuery 类选择器进行选择。然后它们会淡入可见区域内的所有元素。他们的 js 文件没有最小化，因此您可以对大部分功能进行逆向工程。需要注意的重要一点不是它一次显示每一行，而是显示适合查看区域的每个元素。它们的关键函数如下所示：

var elTop = $(el).offset().top - $(window).scrollTop();
var elHeight = $(el).height();
// if between top of footer and top of window
if (elTop + elHeight > 40 && elTop < $(window).height()) {

  if ($.inArray($(el).attr("data-unique-id"), elementsInView) < 0) {
    addToView(el);
  }

} else {

  if ($.inArray($(el).attr("data-unique-id"), elementsInView) >= 0) {
    removeFromView(el);
  }

}

addToView和removeFromView从数组中添加和删除元素，然后在数组上执行fade。