Question

我正在实施此Simple Image Randomizer以从我的身体列表中加载随机图像。

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});

..但这似乎也行不通。这只是成功的一半。

Answer 1

可能性：

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

jsfiddle

Answer 2

演示： http://so.devilmaycode.it/random-background-image-and-corresponding-style

    $(function(){
        var positions = ['top-left-', 'top-right-', 'bottom-left-', 'bottom-right-'];

        var images = {
            'top-left-' : [1,2,3],
            'top-right-' : [4,5,6],
            'bottom-left-' : [7,8,9],
            'bottom-right-' : [10,11,12]
        };

        function randomize(){
            for(var i = 0; i < positions.length; i++ ){
                var pos = positions[i];
                var random_image = images[pos][Math.floor(Math.random() * images[pos].length)];
                $('<div style="position:absolute;width:400px;height:200px;z-index:1;background:url(images/' + random_image + '.jpg) no-repeat top left;'+ pos.replace(/-/ig, ':0px;')+'"></div>').appendTo('body');
        }
    }
    randomize();
});

Answer 3

谢谢你和他的努力。

根据他的代码，我发现以下内容正如我所需要的那样：

$(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();
});

随机背景图像和相应的风格

3 个答案: