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

我正在實施此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});

..但也似乎不起作用。這隻會是戰鬥的一半。

來源

2014-03-25 JuliaWatanabe

確定編碼更新到你想要做什麼？讓我知道。 –

演示：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(); 
});

來源

2014-03-25 17:45:42

thx。我怎麼會一次將輸出加載到其中一個圖像的body-background中，而不顯示div（或者只顯示一個div）？該腳本看起來很有前途，但我無法在div上正確使用它。 – JuliaWatanabe

@JWatan：幫助我理解......你想在所有角落只需一個容器嗎？ –

在一個特定的角落出現隨機圖像的想法是正確的。但一次只有一個。所以我們可以說我有3張左上角的圖片，2張右上角的圖片，3張左下角的圖片和1張右下角的圖片。隨着每頁重新加載，其中只有一個應該出現。 – JuliaWatanabe

一種可能性：

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

jsfiddle

來源

2014-03-25 17:37:06 abfurlan

是thx，這似乎是手動插入位置的工作，只是試了一下。 – JuliaWatanabe

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

來源

2014-03-26 23:32:48 JuliaWatanabe

我還有一個關於這個問題的問題：目前看來，4個角的每一個出現的概率相同，因此一些圖像比其他圖像出現得更頻繁，因爲例如在左上角只有一個圖像可用。代碼如何查找出現相同概率的所有圖像？ – JuliaWatanabe

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

回答

相關問題