1

メイン ナビゲーションで個々のアンカーをマウスオーバーすると、img (#bgimg) がフェード インするようにしています。アンカーごとに異なる img が必要です。私はプラグイン Fullscreenr を使用しており、それぞれがメイン ナビゲーション内のリンクに関連する 4 つの異なる画像を持っています。マウスアウトすると、元の img に戻ります。私は自分のホームページでこれをやりたいだけです。以下は、使用したいページへのリンクと、マークアップの抜粋です。

http://tamedia.ca/marlowe/home.html

<body>
  <img id="bgimg" src="img/bg-home.jpg" />

  <div id="container">
  <header>      
       <nav>
        <ul>
          <li><a href="brand.html">BRAND</a></li>
          <li><a href="collection-aw12.html">COLLECTION</a></li>
          <li><a href="boutiques.html">BOUTIQUES</a></li>
          <li><a href="contact.html">CONTACT</a></li>
        </ul>
       </nav>
    </header>
 </div>
</body>
4

2 に答える 2

0

これが私が使用することになったものです：

$(function () {

    $('#brand-nav').hover(function () {
        $('#bgimg').fadeOut('fast', function () {
            $('#bgimg').attr( 'src', 'img/bg-brand.jpg' );
            $('#bgimg').fadeIn('slow');
        });
    }, function () {
        $('#bgimg').fadeOut('fast', function () {
            $('#bgimg').attr('src', 'img/bg-home.jpg' );
            $('#bgimg').fadeIn('slow');
       });
    });       

});
于 2012-09-07T20:04:20.173 に答える
0

問題を解決するためのスクリプトを提供することはできません。そのためには、宿題を行う必要がありますが、ここでは、できることの簡単なウォークスルーを示します。最初にクラスまたは ID をリスト項目に追加します。このようなもの：

<li><a href="brand.html" id="brand">BRAND</a></li>

そして、たぶん一番下、body タグの前、または JavaScript がある場所ならどこでも、次のようなものを追加できます。

<script>
  $(document).ready(function() {

      //selects the element with the id of brand on mousein
      $('#brand').hover(

             function() {
             //replaces the image on the element bgimg with one called bg-brand.jpg
                $('#bgimg').attr('src', 'img/bg-brand.jpg');
             //fades in the image
                $('#bgimg').fadeIn("slow");
             }, 
             function () {
             //returns to its original background image after the mouseout
                $('#bgimg').attr('src', 'img/bg-home.jpg');
             //fades out the image
                $('#bgimg').fadeOut("slow");
             }
      );

  })(jQuery);
</script>

この例は、最初のアンカーの背景画像を反転するだけですが、これが機能する場合は、ドリルを知っていると思います. 画像をフェードイン/フェードアウトするには、追加のコーディングが必要です。

于 2012-09-07T00:46:11.180 に答える