隨機背景圖像和相應的風格

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

• 演示：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 2

一種可能性：

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

jsfiddle

Answer 3

感謝aepep和他的努力。

我發現下面是工作，就像我需要它，根據他的代碼：

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