淡入幻灯片在鼠标悬停 - Fullscreenr - jQuery

我正在寻找淡入幻灯片（#bgimg）在我的主导航中的每个单独的锚点的鼠标悬停。我想为每个主播提供不同的img。我正在使用插件Fullscreenr，并有四个不同的img，每个都与链接 - 在我的主导航栏中。在mouseout上，我希望它回到原始的img。我只想在我的主页上执行此操作。下面是该页面的链接，我想上使用它，并剪断，它在我的标记部分组成：淡入幻灯片在鼠标悬停 - Fullscreenr - jQuery

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>

来源

2012-09-06 Tyler Almond

哪些是你遇到问题的一部分？ – nnnnnn

我不太确定从哪里开始。我对jQuery的知识非常薄弱，希望有人能够提供给我脚本来实现它。任何帮助将不胜感激。 –

这里是我最终使用：

$(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-07 20:04:20

好了，我不能为你提供一个脚本来解决您的问题，因为你必须做你的功课，但是这里有一些你可以做的事情。首先将类或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-07 00:46:11 harrypujols

谢谢，这很好，但我真的希望有图像淡入淡出。我将如何去添加一个很好的淡入淡出？ –

这似乎并没有工作，它正在做有趣的事情。 –

淡入幻灯片在鼠标悬停 - Fullscreenr - jQuery

回答

相关问题