javascript - onload javascript将背景图像分配给div

Question

我有这段代码，它通过在其“src”中通过 javascript 打印其 url 将不同的图像加载到“img”。在 CSS 对“img”标签中的内容进行处理之后。

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

我正在创建一个新的网络，我想使用相同的系统选择一个数组的图片，但是将 foto 的 url 应用到 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>

我的文件 onload.js 中的 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'
    });
}

也许它很方便......我的文件结构：在此处输入图像描述

score 2 · Accepted Answer

您有两种选择通过 javascript 设置背景图像。您可以只设置background-imageCSS 属性，也可以将字符串添加在一起以形成该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/

score 0 · Accepted Answer

编辑：哦，是的，另一张海报是对的。我没有检查随机数生成......但其余的仍然适用。

我不使用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 + "')";

javascript - onload javascript将背景图像分配给div

2 回答 2

Related

Reference