多个图像淡入onLoad（同时）

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

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>

谢谢！

来源

2011-02-25 sophie

简单的数组和循环都是你需要的。

首先，添加这样的阵列上的代码的顶部：

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/ :-)

来源

2011-02-25 08:40:12

AFAIC，这可以解决这个问题，但如果您在加载之前没有透露图片，它会更好看。 – Kranu 2011-02-25 08:43:45

谢谢@Kranu我忘了更新CSS，我的错误。：/ – 2011-02-25 08:47:02

+1 http://jsfiddle.net/e863X/2/ – Kranu 2011-02-25 08:50:29

你可以只换你的所有图片在这样一个容器：

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

通过在容器上运行淡入淡出效果，您可以将尽可能多的内容添加到容器中，并且它们都会一起淡入，您永远不必更新代码。

来源

2011-02-25 09:02:56 Benry

他们在做的方式是使用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添加和从数组中删除元件，然后褪色阵列上被执行。

来源

2013-08-30 16:02:35 Shapeshifter

多个图像淡入onLoad（同时）

回答

相关问题