2

フルスクリーン / エキスパンド可能な背景画像を実装する方法を知っています。私は通常、jQuery メソッドを使用します。例: http://tinyurl.com/9yl4rbw

しかし！ページにアクセスするたびに背景画像が異なるようにしようとしています。スライド ショーではありません。しかし、古い JavaScript のように (例: http://www.computerhope.com/j18.htm )

どうすれば2つを組み合わせることができますか; jQueryの拡張可能な背景とページ上の更新画像のjavascript?

この効果のための高品質のプラグインに出くわした人はいますか?

*編集_ _ _*

上記の参照 URL にあるように、jQuery メソッドを使用します。基本的に以下：

<!--Expandable BG code IE 7 +-->

  <style>

                #bg { position: fixed; top: 0; left: 0; }
                .bgwidth { width: 100%; }
                .bgheight { height: 100%; }

                #page-wrap { position: relative; width: 950px; margin-left: auto; margin-right: auto;;  }

  </style> 


 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>
                $(function() {   

                        var theWindow        = $(window),
                            $bg              = $("#bg"),
                            aspectRatio      = $bg.width() / $bg.height();

                        function resizeBg() {

                                if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
                                    $bg
                                        .removeClass()
                                        .addClass('bgheight');
                                } else {
                                    $bg
                                        .removeClass()
                                        .addClass('bgwidth');
                                }

                        }

                        theWindow.resize(function() {
                                resizeBg();
                        }).trigger("resize");

                });
        </script>


<!--Expandable BG code IE 7 +-->

<!--Full BG Call-->

<img src="Sandwichfullbg.jpg" id="bg" >


<div id="page-wrap">


<!--End Full BG Call-->

新しいページの訪問時またはページの更新時に背景を変更する簡単な解決策を見つけたいと思います。理想的には約 30 枚の画像を保持します。EG: ページを更新 > 新しい rad イメージ; ページを更新 > 新しい rad イメージ; (×30)

4

3 に答える 3

3

このコードを JS の先頭に追加します。画像の src プロパティを、Sandwichfullbg0.jpg から Sandwichfullbg29.jpg までのランダムな値に設定します (合計 30 の異なる画像)。

$('#bg').attr('src', 'Sandwichfullbg' + Math.floor(Math.random() * 30) + '.jpg');
于 2012-08-28T21:41:04.007 に答える
1

背景にnewbackground-size:coverを使用してから、通常の方法で jQuery を使用してこの背景画像をランダムに変更しないのはなぜですか?

基本的に必要なことはすべて実行して、 jsfiddleを作成しました。(jsfiddle で [実行] をクリックし続けると、背景画像のサイクルがランダムに表示されます)。

background-size:cover は主に新しいバウアーで動作しますが、Modernizrを使用することでこれを克服できます。

ヘッダーにリンクして Modernizr をインストールします

<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>

そしてあなたのHTMLタグで、

<html class="no-js">

編集: コメントに従って、より多くのブラウザーをサポートする別の方法を作成しました:
jsfiddle

今回は、クラスをランダムに適用するようにしました。このクラスには、ie-7/ie-8 およびその他すべてのベンダー プレフィックスと修正が含まれています。IE8 では完璧に見えませんが、画像は本体の高さ/幅に合わせて完全に伸縮します。

于 2012-08-28T21:31:49.897 に答える
1

これを見てください。ソースを表示して確認してください。サイズ変更が簡単になるため、z-index の低い画像を使用します。また、背景画像を最適化して、それほど大きくないようにします。ほぼ 1 MB あり、読み込みに時間がかかりすぎます。アスペクト比がワイドスクリーンでない場合、バージョンのサイズが適切に変更されません。

于 2012-08-28T20:59:05.577 に答える