如何通過點擊使背景在背景中可見

我是使用Javascript的新手& jQuery並試圖製作一個測試網站，以查看使用JavaScript可以做些什麼。如何通過點擊使背景在背景中可見

我有一個問題。

我有8個圖像在頁面的底部。當你點擊圖像時，我想讓DIV圖庫顯示選定的圖像，圖像將出現在頁面的背景中。當您點擊另一張圖片時，該圖片將顯示在DIV圖庫和背景中。

HTML '畫廊'

<div id="gallery"> 
    <ul> 
     <li class="selected"><a href="(URL Img 1)"><img src="(URL Img 1)" alt="Photo 1" /></a>  
     </li> 
     <li><a href="(URL Img 2)"><img src="(URL Img 2)" alt="Photo 2" /></a>  
     </li> 
     <li><a href="(URL Img 3)"><img src="(URL Img 3)" alt="Photo 3" /></a>  
     </li> 
     <li><a href="(URL Img 4)"><img src="(URL Img 4)" alt="Photo 4" /></a>  
     </li> 
     <li><a href="(URL Img 5)"><img src="(URL Img 5)" alt="Photo 5" /></a>  
     </li> 
     <li><a href="(URL Img 6)"><img src="(URL Img 6)" alt="Photo 6" /></a>  
     </li> 
     <li><a href="(URL Img 7)"><img src="(URL Img 7)" alt="Photo 7"/></a>  
     </li> 
     <li><a href="(URL Img 8)"><img src="(URL Img 8)" alt="Photo 8" /></a>  
     </li> 
    </ul> 
</div>

HTML背景圖片

<div class="background-container" style="background-image:url('(URL Img 1');"></div>

jQuery的

我嘗試一些與此：

$("li.selected").on("click", change); 

});

但它似乎沒有工作，甚至越來越接近。有誰知道缺少的鏈接？

非常感謝Thankyou。 - Yahitchu。

來源

2013-07-14 Kevin Meijvis

試試這個

$(document).ready(function(){ 
    $("#gallery a").on("click", function(){ 
     $('.background-container').css('background-image',url(this.attr("href")); 
    }); 
});

如果圖像URL都是一樣的，你也可以去掉<a>標誌，只有<img>這樣玩：

$(document).ready(function(){ 
    $("#gallery img").on("click", function(){ 
     $('.background-container').css('background-image',url(this.attr("src")); 
    }); 
});

來源

2013-07-14 09:55:54 sdespont

試了一下，好像沒上班，它會打開圖像中的新tabblad，並不會改變背景容器和畫廊。 –

Oups，我使用了錯誤的函數'attr'而不是'css' ...更新了代碼。試試這個新版本 – sdespont

@KevinMeijvis，代碼正在工作。我不確定你的html/css - 因爲gallery div只包含一個列表，所以我不確定你想在哪裏顯示圖像，實際上，在這個div裏面？ – sinisake

選擇元素不更改其類屬性，因此$("li.selected")將始終引用列表中的第一個元素。即使情況並非如此，選擇器（可能）會在頁面加載時進行評估，而不是在用戶點擊時進行評估;所以即使您將其更改爲使用所選元素，它仍會使用第一個元素。它只是用戶點擊時運行的change函數本身。

來源

2013-07-14 09:59:21

你想要這樣嗎？ DEMO http://jsfiddle.net/yeyene/wTt8Z/1/

$('#gallery a').on('click',function(){ 
    var url = $(this).find('img').attr('src'); 
    $('.background-container').css("background-image", "url("+url+")"); 
});

來源

2013-07-14 10:10:54 yeyene

是的！但我不知道如何編寫腳本！ –

你可以基於這個jsfiddle，html，css和js都在那裏。 – yeyene

如何通過點擊使背景在背景中可見

回答

相關問題