1

我希望在我的主导航中的每个锚点鼠标悬停时淡入 img (#bgimg)。我想为每个锚点使用不同的 img。我正在使用插件 Fullscreenr，并且有四个不同的 img，每个都与我的主导航中的链接相关。在 mouseout 上，我希望它回到原来的 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

好吧，我无法为您提供解决问题的脚本，因为您必须做功课，但这里有一些关于您可以做什么的演练。首先将类或 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 回答
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 回答