1

JQuery ScrollTo プラグインを使用して、次の垂直サイトLINKを作成しました。基本的なページ アーキテクチャは次のとおりです。

<div id="fixed-menu">
     <!-- MAIN MENU FIXED TO TOP OF WINDOW -->
</div>

<div id="wrapper">
     <div id="mask">
          <div id="page1">
             <!-- PAGE 1 CONTENT -->
          </div>
          <div id="page2">
             <!-- PAGE 2 CONTENT -->
          </div>
          <div id="page3">
             <!-- PAGE 3 CONTENT -->
          </div>
          <div id="page4">
             <!-- PAGE 4 CONTENT -->
          </div>
     </div>
</div>

私の問題は、個別の「ページ」ごとにフルスクリーンの背景画像を表示しようとするときです。JQueryプラグインFullscreenrを使用して、さまざまな画面解像度などに適切に適応する背景画像を作成した経験があります。ただし、サイトの「ページ」ごとに異なる画像を設定する方法に慣れていません。選択したメニュー項目に応じて背景画像の変更をトリガーする代替案があると考えていました。誰かがこの問題について経験やアドバイスを持っていますか? 画像を積み重ねてみましたが、サイトのどの時点でも部分的な背景画像が表示されるのを避けたいと考えています。

4

2 に答える 2

1

Jquery ウェイポイントを見てください。基本的に、これにより、サイトが特定のポイントまでスクロールしたときに JavaScript イベントを実行できます。 http://imakewebthings.com/jquery-waypoints/

したがって、各「ページ」がページに表示されるウェイポイントを設定し、それに応じて背景画像を変更します。

于 2012-09-27T19:31:33.153 に答える
0

JQuery ウェイポイントを正常に機能させるのに苦労したため、関連する見出しをマウスでクリックした後、背景画像を変更するだけになりました。サイトは自動スクロールのみ (マウス ホイール機能なし) であるため、これで問題なく動作します。

使用される JQuery コードは次のとおりです。

<script type="text/javascript">
$(function() {
    $('a.panel-about').click(function(){
    $("#bgimg").attr('src',"<?php bloginfo('stylesheet_directory'); ?>/images/bg2.jpg");
    return false;
    });
});
</script>

したがって、「panel-about」クラスのリンクをクリックすると、背景画像が html で指定された既存の bg1.jpg から bg2.jpg に変更されます。

于 2012-09-28T18:51:42.510 に答える