Question

在我的页面上，我有一个图库（只有div），上面有几张图片。我想立即显示前9个图像，然后加载更多图像并使用CSS过渡在现有图像之间进行动画处理。

加载初始图像很简单，但我不知道加载下一组图像然后开始动画的最佳方法（使用CSS Transform属性）。到目前为止，这就是我所拥有的：

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="test3.png"></div>
</div>

CSS（缩写）：

img {
    display: inline;
    position: relative;
    margin: 0;
    padding: 0;
    width: 30%;
}

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

我希望做各种各样的效果，最简单的就是改变不透明度并将一张图像淡化到另一张图像上。要加载下一组图像，我有这个：

使用Javascript：

    var imageArray = [
        'test2.png',
        'test3.png',
        'test4.png',
        'test5.png',
        'test6.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');
        divs[0].appendChild(imageNodeArray[0])
    }

这确实会向我的mainContainer添加图像，但是，即使我可以从devTools告诉它已应用changed.opaque类，添加的图像上也不会显示不透明度。

我很好奇。我也想知道最好的方法来堆叠＆＃34;图像有一堆动画通过。我不确定追加孩子是对的......谢谢

Answer 1

function animate() {
    var index = Math.floor((Math.random() * document.querySelectorAll('#mainContainer > .imageHolder').length + 1));
    var current = document.querySelector('.top');
    var next = document.querySelector('.imageHolder:nth-of-type(' + index + ')');
    current.className = "imageHolder";
    next.className += "top";
}

应该能够处理和切换任何动态插入的图像。

目前正在使用：

.imageHolder {
    display: none;
}
.top {
    display: inherit;
}

切换图像只是一个简单的实现。

这是工作小提琴：http://jsfiddle.net/e9dxN/1/

替代实施：http://jsfiddle.net/e9dxN/6/

如何加载一组初始图像，然后在没有jQuery的情况下随机地在它们之间进行动画处理

1 个答案: