Question

我目前正在为我的网站制作网格布局。我想要的是一组9个图像尽可能快地加载，然后，在页面加载后，我想要检索更多图像，将它们添加到图像容器并在它们之间设置动画。我知道如何进行转换，但我不知道堆叠图像以便在它们之间进行动画处理的最佳方法。创建img个节点并将它们作为子节点附加，只需将它们添加到页面即可。此外，试图绝对定位每个元素会对我的布局造成严重破坏。

我知道浮动它们会阻止图像占用垂直空间但是，由于我现在不使用浮动，我想避免仅使用它们来堆叠图像。

如果你查看我的HTML，我基本上只是想在divs中创建一堆多个图像，所有图像都在彼此之上。

任何指导都会很棒。

这是我的HTML：

<div id="mainContainer">
    <div class="imageHolder"><img class="homeImages" src="test.png"></div>
    <div class="imageHolder"><img class="homeImages" src="test1.png"></div>
    <div class="imageHolder"><img class="homeImages" src="test2.png"></div>
    <div class="imageHolder"><img class="homeImages" src="test3.png"></div>
    <div class="imageHolder"><img class="homeImages" src="test4.png"></div>
    <div class="imageHolder"><img class="homeImages" src="test5.png"></div>
    <div class="imageHolder"><img class="homeImages" src="test6.png"></div>
    <div class="imageHolder"><img class="homeImages" src="test7.png"></div>
    <div class="imageHolder"><img class="homeImages" src="test8.png"></div>
</div>

我正在使用此javascript在页面加载后预加载新图像：

    var imageHolders = document.querySelectorAll('.imageHolder');
    var imageArray = [
        'media/refined/newImage.png',
        'media/refined/newImage1.png',
        'media/refined/newImage2.png',
        'media/refined/newImage3.png',
        'media/refined/newImage4.png',
    ];
    var imageNodeArray = [];
    for(var i = imageArray.length - 1; i >= 0; i -= 1) {
        var img = new Image();
        img.onload = function() {
           imageNodeArray.push(this);
        };
        img.src = imageArray[i];
    }
    document.onclick = function() {
        imageNodeArray[0].setAttribute('class', 'changed opaque');
        imageHolders[0].appendChild(imageNodeArray[0])
    }

CSS真的是让我感受到的：

#mainContainer {
    margin: 0 auto;
    padding: 2.2em 0;
    width: 85%;
    text-align: center;
}

div.imageHolder {
    display: inline;
}

img {
    width: 30%;
}

.changed.opaque {
    opacity: .5;
    border: 2px solid red;
}

谢谢！

Answer 1

将主容器的位置设置为relative，将每个图像容器的位置设置为absolute。

http://jsfiddle.net/ehu5j/

如何在Div中堆叠和隐藏图像以便在它们之间制作动画（没有浮动）

1 个答案: