淡入幻燈片在鼠標懸停 - 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

回答

相關問題