在随机位置显示随机图像 [英] Show random images at random places jquery

问题描述

我正在尝试在div内的随机区域显示随机图像.我正在寻找的是此网站.它们显示淡入和淡出的图像和框.

I'm trying to display random images at random areas within a div. What I'm looking for is close to this site. They display images and boxes that fades in and out.

我一直在寻找类似这样的jQuery插件，但找不到任何插件.你们对此有任何想法吗?

I've looked for a jQuery plugin for something like this but I can't find any. You guys have any idea about this?

推荐答案

如果您确实想要类似链接站点的效果，那么您并不是真正希望在随机位置添加随机图像.这些位置经过硬编码，每个位置都从适当大小的图像子集中随机选择.

If you really want an effect like the linked site, then you're not really looking to add random images in random positions. The positions are hard-coded and each one randomly chooses from a subset of images at the proper size.

var tS;
var tL;
var imgSmall = ["1.jpg", "2.png", "3.png", "10.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg"];
var smallLen = imgSmall.length;
var imgLarge = ["A1.jpg", "A2.jpg", "A3.jpg", "A10.jpg", "A4.bmp", "A5.jpg", "A6.jpg", "A7.jpg", "A8.jpg", "A9.jpg"];
var largeLen = imgLarge.length;

function showLarge() {
    var idxLarge = Math.floor(Math.random() * largeLen);
    $("#large").fadeToggle(300, function() { $("#large").attr("src", "img/" + imgLarge[idxLarge]) }).fadeToggle(300);
    tL = setTimeout("showLarge()", 2000);
}

function showSmall() {
    var idxSmall = Math.floor(Math.random() * smallLen);
    $("#small").fadeToggle(300, function() { $("#small").attr("src", "img/" + imgSmall[idxSmall]) }).fadeToggle(300);
    tS = setTimeout("showSmall()", 1700);
}

$(document).ready(function() {
    showLarge();
    showSmall();
});

在HTML中，您只需要为图像放置几个位置即可.

In the HTML, you just need a couple positions for the images.

<img src="img/1.jpg" id="small" style="position:absolute; top:50px; left:100px;" />

<img src="img/A8.jpg" id="large" style="position:absolute; top:100px; left:400px;" />

此方法的优点是您可以完全根据需要设计布局，并使用彩色div和全部.您还可以使用该代码的变体来对彩色div的颜色进行动画处理.

The advantage of this approach is that you can design the layout exactly as you like, with colored divs and all. You can also use a variant of that code to animate the colors of the colored divs.

这篇关于在随机位置显示随机图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！