Jquery 随机背景图像及其风格

Jquery 随机背景图像及其风格,jquery,random,background-image,Jquery,Random,Background Image,我实现这一点是为了从我的身体列表中加载随机图像 var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg']; $('body').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'}); 问题是,每个图像都准备放在屏幕的一个特定角落。 我

我实现这一点是为了从我的身体列表中加载随机图像

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];
$('body').css({'background-image': 'url(images/' + images[Math.floor(Math.random() *      images.length)] + ')'});
问题是,每个图像都准备放在屏幕的一个特定角落。 我该如何添加一个对应的列表,其中存储每个图像的背景样式,以及如何将其传递到脚本? 我还试图手动将脚本增强为类似的内容

  $('body').css({'background': 'url(images/' + images[Math.floor(Math.random() *      images.length)] + ')' + "no-repeat fixed top left});
…但这似乎也不起作用。这只会是战斗的一半。

一种可能性:

 $('body').css({'background-image':'url(' + images[Math.floor(Math.random() *      images.length)] + ')','background-repeat': 'no-repeat','background-position': '200px 70px'});

  • 演示:
$(函数(){
变量位置=[“左上-”、“右上-”、“左下-”、“右下-”;
变量图像={
“左上-”:[1,2,3],
“右上-”:[4,5,6],
“左下-”:[7,8,9],
“右下-”:[10,11,12]
};
函数随机化(){
对于(变量i=0;i
感谢aSeptik和他的努力

根据他的代码,我发现以下各项工作正常:

$(function(){
        var positions = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
    var images = {
        'top-left' : [7],
        'top-right' : [0,5],
        'bottom-left' : [2,4,6],
        'bottom-right' : [1,3,8]
    };

    function randomize(){
        var pos = positions[Math.floor(Math.random() * positions.length)];
        var random_image = images[pos][Math.floor(Math.random() * images[pos].length)];
        $('body').css('background', 'url("images/' + random_image + '.jpg") no-repeat ' + pos.replace(/-/, ' '));
    }

    randomize();
});

是的,thx,这似乎适用于手动插入位置,只是尝试了一下。thx。如何一次将一个图像的输出加载到主体背景中,而不显示div(或者只显示一个div)?脚本编写看起来很有希望,但我无法在div中正确使用它。@JWatan:请帮助我理解。。。您是否希望所有角落都只包含一个容器?在一个特定角落中显示随机图像的想法是正确的。但一次只能一个。假设我有3张左上角的图片,2张右上角的图片,3张左下角的图片,1张右下角的图片。在每次重新加载页面时,应该只显示其中一个…因此它与我的初始脚本完全相同,只是带有扩展,我需要将特定(预定义)背景样式关联到每个图像。我想可能会有第二个变量(或扩展的第一个变量),其中包含额外的信息,如“左上角”。。var的内容必须进入脚本的最后一行,就像Anderson B.Furlan写的那样,只是自动的。有一个想法,因为我不是编码高手:因为我不需要任何全自动的东西(我的图像不会经常更改),难道不可能让var“图像”不仅包含图像的名称/编号,但是位置呢?所以,不用写“a”:…,“b”:。。。我会写“左上角”:[1,2,3],“左下角”:[4,5,6],当随机算法选择img 1,2或3时,“左上角”将直接放在最后一个脚本行中?确定编码更新以执行您想要的操作。。。让我知道。关于这一点,我还有一个问题:目前看来,4个角中的每一个都有相同的出现概率,因此一些图像比其他图像出现得更频繁,因为例如,在左上角,只有一个图像可用。代码如何查找所有出现概率相同的图像?
$(function(){
        var positions = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
    var images = {
        'top-left' : [7],
        'top-right' : [0,5],
        'bottom-left' : [2,4,6],
        'bottom-right' : [1,3,8]
    };

    function randomize(){
        var pos = positions[Math.floor(Math.random() * positions.length)];
        var random_image = images[pos][Math.floor(Math.random() * images[pos].length)];
        $('body').css('background', 'url("images/' + random_image + '.jpg") no-repeat ' + pos.replace(/-/, ' '));
    }

    randomize();
});