动画随机平铺背景

Animating random tiled background

本文关键字：背景 随机 动画      更新时间：2023-09-26

我正在创建一个网站，我喜欢这个网站的背景效果与图像动画的进出:http://www.6wunderkinder.com/en/#/welcome

我还没有把任何代码放在一起。我知道如何设置页面，使其响应等，但我不确定在什么方向去使图像随机(它似乎随机)动画进出。有人能给我指个方向吗?

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

你可以这样做- 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);


<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;}
编辑:

对于Callback，将alert替换为

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

或

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

相关文章：