onload javascript將背景圖像分配給div

我有這個代碼，它通過在其「src」中通過javascript打印它的URL來將不同的圖像加載到「img」。在CSS完成了關於「img」標籤中的內容的魔術之後。onload javascript將背景圖像分配給div

$(window).load(function() { 
    var randomImages = ['img1','img2','img3','img4','img5','img6','img7','img8','img9','img10','img11','img12','img13','img14','img15','img16','img17','img18','img19','img20','img21','img22','img23','img24','img25','img26','img27','img28','img29','img30']; 
    var rndNum = Math.floor(Math.random() * randomImages.length); 

    var $win = $(this); 
    var iMac = $(window).width() > 1920 ? '_imac' : ''; 
    var $img = $('#background').attr('src', '_img/bg/index_rnd/' + randomImages[rndNum] + iMac + '.jpg').css({'position':'fixed','top':0,'left':0}); 
     function resize() { 
      if (($win.width()/$win.height()) < ($img.width()/$img.height())) { 
       $img.css({'height':'100%','width':'auto'}); 
      } else { 
       $img.css({'width':'100%','height':'auto'}); 
      } 
     } 
     $win.resize(function() { resize(); }).trigger('resize'); 
    });

我創建一個新的網絡，我想使用相同的系統中選擇一個陣列的圖片，但應用此照片的網址爲CSS背景圖像。

#home{ 
    background: url(INSERT URL OF JAVASCRIPT HERE) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    }

我在下面的代碼中嘗試過，但我認爲這是一種笨拙的方式。我不知道這是否甚至可能，或者如果有比這種方法更簡單的方法通過javascript。如你所見，我不是專家。

$(window).load(function() { 
    var randomImages = ['img1','img2','img3']; 
    var rndNum = Math.floor(Math.random() * randomImages.length); 
    var url = 'url(_img/bg_array/' + randomImages[rndNum] + '.jpg)' 


    $('#home').css({ 
     'background:' url 'no-repeat' 'center' 'center' 'fixed', 
     '-webkit-background-size': 'cover', 
     '-moz-background-size': 'cover', 
     '-o-background-size': 'cover', 
     'background-size': 'cover' 
     }); 
    }

謝謝!!!!

編輯：更多資訊//////////////////////////////

jfriend00的答案似乎是100％正確的和邏輯。我正在嘗試使用第二個選項。我已經嘗試了兩種選擇，但都沒有效果。我也試圖通過JavaScript應用一個簡單的代碼到#home，它不工作...所以我認爲有一個JavaScript文件和HTML之間的鏈接的問題，也許問題是在別的地方...

在這裏我會把更多可能的有用信息。我插入我的HTML和我的連接頭部不同的文件，也許這很有幫助。我正在創建一個水平佈局的網頁。它的工作原理完全通過jQuery ...

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>DJ Femke</title> 

     <!-- JAVASCRIPT CONNECTIONS --> 

     <script type="text/javascript" src="_js/jquery-1.3.1.min.js"></script> 
     <script type="text/javascript" src="_js/jquery.scrollTo.js"></script> 
     <script type="text/javascript" src="_js/scroll_resize.js"></script> 
     <script type="text/javascript" src="_js/onload.js"></script> 


     <!-- CSS CONNECTIONS --> 
     <link type="text/css" rel="stylesheet" href="_css/style.css" media="screen"/> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <div id="mask"> 

       <div id="booking" class="item"> 

        <a name="item1"></a> 
        <div class="content">item1 
         <a href="#booking" class="panel">1</a> | 
         <a href="#about_me" class="panel">2</a> | 
         <a href="#home" class="panel">3</a> | 
         <a href="#music" class="panel">4</a> | 
         <a href="#photo_video" class="panel">5</a> 
         <a href="#contact" class="panel">6</a> 
         <p>BOOKING</p> 
        </div> 
       </div> 

       <div id="about_me" class="item"> 
        <a name="item2"></a> 
        <div class="content">about_me 
         <a href="#booking" class="panel">1</a> | 
         <a href="#about_me" class="panel">2</a> | 
         <a href="#home" class="panel">3</a> | 
         <a href="#music" class="panel">4</a> | 
         <a href="#photo_video" class="panel">5</a> 
         <a href="#contact" class="panel">6</a> 
         <p>ABOUT ME</p> 
        </div> 
       </div> 

       <div id="home" class="item" src=""> 
        <a name="item3"></a> 
        <div class="content">item3 
         <a href="#booking" class="panel">1</a> | 
         <a href="#about_me" class="panel">2</a> | 
         <a href="#home" class="panel">3</a> | 
         <a href="#music" class="panel">4</a> | 
         <a href="#photo_video" class="panel">5</a> 
         <a href="#contact" class="panel">6</a> 
         <p>HOME</p> 
        </div> 
       </div> 

       <div id="music" class="item"> 
        <a name="item4"></a> 
        <div class="content">item4 
         <a href="#booking" class="panel">1</a> | 
         <a href="#about_me" class="panel">2</a> | 
         <a href="#home" class="panel">3</a> | 
         <a href="#music" class="panel">4</a> | 
         <a href="#photo_video" class="panel">5</a> 
         <a href="#contact" class="panel">6</a> 
         <p>MUSIC</p> 
        </div> 
       </div> 

       <div id="photo_video" class="item"> 
        <a name="item5"></a> 
        <div class="content">item5 
         <a href="#booking" class="panel">1</a> | 
         <a href="#about_me" class="panel">2</a> | 
         <a href="#home" class="panel">3</a> | 
         <a href="#music" class="panel">4</a> | 
         <a href="#photo_video" class="panel">5</a> 
         <a href="#contact" class="panel">6</a> 
         <p>PHOTO AND VIDEO</p> 
        </div> 
       </div> 

       <div id="contact" class="item"> 
        <a name="item6"></a> 
        <div class="content">item6 
         <a href="#booking" class="panel">1</a> | 
         <a href="#about_me" class="panel">2</a> | 
         <a href="#home" class="panel">3</a> | 
         <a href="#music" class="panel">4</a> | 
         <a href="#photo_video" class="panel">5</a> 
         <a href="#contact" class="panel">6</a> 
         <p>CONTACT</p> 
        </div> 
       </div> 

      </div> 
     </div> 
    </body> 
</html>

在我的文件中的JavaScript onload.js如下：

$(window).load(function() { 
    var randomImages = ['img1','img2','img3']; 
    var rndNum = Math.floor(Math.random() * randomImages.length); 
    var url = 'url(_img/bg_array/' + randomImages[rndNum] + '.jpg)' 

    $('#home').css({ 
     'background': url + 'no-repeat center center fixed', 
     '-webkit-background-size': 'cover', 
     '-moz-background-size': 'cover', 
     '-o-background-size': 'cover', 
     'background-size': 'cover' 
    }); 
}

也許它得心應手......我的文件結構： enter image description here

來源

2012-08-24 Daniel Ramirez-Escudero

你有兩個選擇來設置背景圖像通過JavaScript。您只能設置background-image CSS屬性，或者可以將字符串添加到一起以形成background屬性的整個字符串。

選項1：

$(window).load(function() { 
    var randomImages = ['img1','img2','img3']; 
    var rndNum = Math.floor(Math.random() * randomImages.length); 
    var url = 'url(_img/bg_array/' + randomImages[rndNum] + '.jpg)'; 


    $('#home').css('background-image', url); 
});

選項2：

$(window).load(function() { 
    var randomImages = ['img1','img2','img3']; 
    var rndNum = Math.floor(Math.random() * randomImages.length); 
    var url = 'url(_img/bg_array/' + randomImages[rndNum] + '.jpg)' 

    $('#home').css({ 
     'background': url + ' no-repeat center center fixed', 
     '-webkit-background-size': 'cover', 
     '-moz-background-size': 'cover', 
     '-o-background-size': 'cover', 
     'background-size': 'cover' 
    }); 
});

你也在你的代碼是完成$(window).load()聲明結尾缺少一個右);。第二個選項的

工作例如：http://jsfiddle.net/jfriend00/rGkww/

來源

2012-08-24 20:20:06 jfriend00

+1使用類 - 我會選選項1 - 這是很好的風格，獨立的不同的語言/腳本語言，因爲它去好不同的代碼。 –

你好jfriend00。那是我需要的那種答案。現在它不適合我。我正在嘗試第二種選擇。你測試過這些代碼嗎？我也嘗試了第一個沒有成功的選擇。一切似乎都是正確的......我嘗試了不同的URL路徑，這不是問題。我的圖像命名正確...是否測試過？ –

@ DanielRamirez-Escudero - 我注意到第二個選項缺少空格，所以我將其添加到我的答案中。如果這些都不起作用，那麼這與你的特定情況有關。如果您向我們提供實際的網頁，我們可以自己去調試。如果你不這樣做，那麼你將不得不自己排除故障。我的猜測是，你要麼有一個腳本錯誤，阻止執行的東西，或者你沒有構建正確的圖像路徑。這些不是我們可以在這裏測試的東西，除非你給我們一個網頁的鏈接。 – jfriend00

編輯：噢，另一張海報是正確的。我沒有檢查隨機數字的生成......但其餘的依然如此。

我不使用jQuery的...

但在常規Javsacript它會更喜歡： **警告，未經測試的代碼**

var imgs = ["foo1.jpg", "foo2.jpg"]; 
var idx = Math.floor(Math.random() * imgs.length) 
var img = imgs[idx]; 

var el = document.getElementById('home'); 
el.style.backgroundImage="url('" + img + "')";

來源

2012-08-24 20:20:02

onload javascript將背景圖像分配給div

回答

相關問題