个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 04:57:33 24 4
gpt4 key购买 nike

我有这段代码，它通过在其“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');
    });

我正在创建一个新网站，我想使用相同的系统选择数组的图片，但将照片的 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'
    });
}

也许它很方便……我的文件结构: enter image description here

最佳答案

通过 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/

关于javascript - onload javascript将背景图像分配给div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12115883/

24 4 0
文章推荐： python - 尝试通过脚本在 Spotfire 中打开和关闭显示/隐藏项目过滤器
文章推荐： PHP打包二进制数据
文章推荐： c - C 中的洗牌函数
文章推荐： jquery - 使用 jquery 或 ajax 显示/隐藏内容
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com