Question

我正在创建一个网站，我喜欢这个网站的背景效果，其中包含动画内外的图像：http://www.6wunderkinder.com/en/#/welcome

我还没有把任何代码放在一起。我知道如何设置页面并使其响应等，但我不知道在哪个方向上随机制作图像（似乎是随机的）动画进出。有人能指出我正确的方向吗？

编辑：我想知道如何选择随机元素。

Answer 1

你可以这样做 - JSFiddle Demo

<强>的jQuery

function randomFade() {

    var items = $('ul li');
    var random = Math.floor(Math.random() * items.length);
    //console.log(random)

    items.eq(random).find("img").fadeOut("slow", function () {
        // call back here, either fade in a new image, or do something else
        alert("item faded out!");
    });

}

setInterval(function () {
    randomFade();
}, 3000);

<强> HTML

<ul>
    <li><img src="http://placehold.it/50x50&text=1" alt=""></li>
    <li><img src="http://placehold.it/50x50&text=2" alt=""></li>
    <li><img src="http://placehold.it/50x50&text=3" alt=""></li>
    <li><img src="http://placehold.it/50x50&text=4" alt=""></li>
    <li><img src="http://placehold.it/50x50&text=5" alt=""></li>
    <li><img src="http://placehold.it/50x50&text=6" alt=""></li>
    <li><img src="http://placehold.it/50x50&text=7" alt=""></li>
    <li><img src="http://placehold.it/50x50&text=8" alt=""></li>
    <li><img src="http://placehold.it/50x50&text=9" alt=""></li>
    <li><img src="http://placehold.it/50x50&text=10" alt=""></li>
</ul>

<强> CSS

li { float:left; width:50px; height:50px; border:1px solid #000; margin:5px; list-style:none;}

修改

对于回调，请将alert替换为：

var $this = items.eq(random).find("img"); $this.attr("src", "http://placehold.it/50x50&text=new"); $(this).delay(300).fadeIn(300);

或

创建一个包含要显示的图像列表的初始数组，然后您可以从该列表中选择一个随机项并将其淡入。

动画随机平铺的背景

1 个答案: