多個圖像淡入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（同時）

回答

相關問題