Question

您好我正在尝试用JS制作一个简单的动画。我有my page这是我的照片库。每个图像都在span中，该span具有class =“img”。你现在在我的页面上看到的是我想要的图像的最终位置。我想要做的是在页面完成加载时让每个图像从上到下落到那个结束位置。

我知道我可以通过调用

var document.getElementsByClassName("img");

将所有图像放入数组中但是如何制作动画呢？我知道如何将元素的位置更改为新的坐标但是如何在CSS中从顶部下降到设置位置？

Answer 1

你的意思是这样的：

http://jsfiddle.net/silkster/58dRA/

<强> CSS：

.pw {
    position: relative;
}
.left, .middle, .right {
    float: left;
    width: 294px;
    min-height: 1500px;
    overflow: hidden;
}
.img {
    position: relative;
    top: -2000px;

    /* Set our transitions up. */
    -webkit-transition: top 1.25s;
    -moz-transition: top 1.25s;
    transition: top 1.25s;
}

<强> JavaScript的：

jQuery.fn.reverse = [].reverse;

$(function () {
    var delay = 500;
    $('.left, .middle, .right').each(function () {
        var imgs = $('.img').reverse(),
            iLen = imgs.length;

        imgs.each(function () {
            var c = $(this), 
                h = c.height();

            delay += 100;
            setTimeout(function () {
                c.css('top', '0px');
            }, delay);

        });
    });
});

js图像落入位置

1 个答案: