0

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

新しい Web を作成していますが、同じシステムを使用して配列の画像を選択したいと考えていますが、写真の 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% 正しく、論理的です。2番目のオプションを使用しようとしています。両方のオプションを試しましたが、どちらもうまくいかないようです。また、javascript を介して #home に簡単なコードを適用しようとしましたが、機能しません...だから、javascript ファイルと html の間のリンクに問題があると思います。おそらく問題は別の場所にあります...

ここでは、より有用な情報を掲載します。html と別のファイルへの接続を頭に挿入します。これは役立つかもしれません。水平レイアウトの Web を作成しています。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'
    });
}

多分それは便利です...私のファイル構造： ここに画像の説明を入力

4

2 に答える 2

2

JavaScript を使用して背景画像を設定するには、2 つの選択肢があります。CSS プロパティのみを設定するbackground-imageことも、文字列を追加してプロパティの文字列全体を形成することもでき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()

2番目のオプションの実例: http://jsfiddle.net/jfriend00/rGkww/

于 2012-08-24T20:20:06.763 に答える
0

編集：そうそう、他のポスターは正しかった. 乱数の生成についてはチェックしていませんが、残りはまだ当てはまります。

私は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-24T20:20:02.453 に答える