jquery更新div背景

我試圖更新一個頁面的body元素的背景圖像，當我懸停與data-*屬性的鏈接。它像一個魅力，但我無法找到一種方式來創建一個平滑的淡出之間的圖像，當一個鏈接懸停。這裏是我的代碼：jquery更新div背景

$(document).ready(function(){ 
 
\t $('.link').hover(
 
\t \t function() { 
 
\t \t \t var bg = $(this).data('fond'); 
 

 
\t \t \t // alert(bg); 
 

 
\t \t \t $('body').css("backgroundImage", 'url(' + bg + ')'); 
 
\t \t }, 
 
\t \t function() { 
 
      $('body').css("backgroundImage", 'url(http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg)'); 
 
     } 
 
\t); 
 
});

body { 
 
\t margin:0; 
 
\t background-image: url("http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg"); 
 
\t background-repeat: no-repeat; 
 
\t background-size: cover; 
 
\t transition: all 1s; 
 
} 
 

 
header { 
 
\t width: 50%; 
 
\t margin: 50px auto; 
 
} 
 

 
h1 { 
 
\t text-align: center; 
 
} 
 

 
nav { 
 
\t position: absolute; 
 
\t width: 50%; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translate(-50%,-50%); 
 
\t text-align: center; 
 
} 
 

 
nav ul { 
 
\t padding: 50px; 
 
\t background-color: rgba(0, 0, 0, 0.95); 
 
} 
 

 
nav ul li { 
 
\t display: inline-block; 
 
\t padding: 0 20px; 
 
} 
 

 
nav ul li a { 
 
\t color: white; 
 
\t text-decoration: none; 
 
}

<header> 
 
     <h1>Hover a link, bro</h1> 
 
    </header> 
 
     <!-- Main --> 
 
     <main> 
 
      <nav class="main-nav"> 
 
      <ul> 
 
       <li data-fond ="img/belharra.jpg" class="link"><a href="#">Belharra</a></li> 
 
       <li data-fond ="img/jaws.jpg" class="link"><a href="#">Jaws</a></li> 
 
       <li data-fond ="img/mavericks.jpg" class="link"><a href="#">Mavericks</a></li> 
 
       <li data-fond ="img/nazare.jpg" class="link"><a href="#">Nazare</a></li> 
 
       <li data-fond ="img/teahupoo.jpg" class="link"><a href="#">Teahuppo</a></li> 
 
      </ul> 
 
      </nav> 
 
     </main>

獎勵：有人能向我解釋爲什麼我不得不使用第二功能，當鼠標離開鏈接給身體原來的背景圖片？我認爲.hover()方法會自動在目標元素上切換...

.hover（）方法綁定mouseenter和mouseleave事件的處理程序。您可以使用它在鼠標位於元素內時簡單地將行爲應用於元素。

非常感謝您的幫助！

來源

2016-01-23 jeremy_o

感謝您的編輯亞當 –

我不認爲這可以做到平滑的淡入淡出效果。
實現此目的的一種更好的方法是將所有圖像放在div容器中的html中。所有圖像都需要將css不透明屬性設置爲0.以這種方式，您可以輕鬆更改圖像間的不透明屬性，並獲得平滑的淡入淡出效果。

來源

2016-01-23 13:34:51 smdsgn

嗨，謝謝你的回答。正如你所說，我實現了創建一個包含所有圖像的新容器，並根據懸停鏈接改變其不透明度。 –

不客氣@jeremy_o。很高興幫助你。 – smdsgn

body { 
    margin:0; 
    background-image: url("http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    transition: all 1s; 
}

請改變你的URL鏈接url("http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg"); 這是不正確的

來源

2016-01-23 12:12:05 user5829990

對不起，有什麼不好的網址？ –

你可以盡你的jQuery這樣。

$('body').fadeOut(1000).css("your code").fadeIn(1000);

下面的HTML，我創建得到一個idea.think這可能有助於you.just副本和嘗試。

<html> 
<head> 
<title>Welcome !</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<style type="text/css"> 
.myimage{ 
    width:500px; 
    height: 500px; 
    overflow: hidden; 
} 

.myimage img{ 
    width: 100%; 
    height: 100%; 

} 


</style> 


<body> 

    <div class="myimage"> 
    <img id="one" src="http://www.estero.co.nz/new/wp-content/uploads/2014/03/45901_new-zealand.jpg"/> 
    <img id="two" src="http://www.timeforkids.com/files/styles/tfk_rect_large/public/2011-07/nz_ss5.jpg?itok=0m-TtEYy"/> 
    </div> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#one").mouseenter(function(){ 
     $(this).fadeOut(1000); 
    }); 
}); 
</script> 

</body> 
</html>

來源

2016-01-23 13:33:57

jquery更新div背景

回答

相關問題