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在数组中添加和删除元素，然后在数组上执行淡入淡出。

多个图像fadeIn onLoad（同时）

3 个答案: