如何通过点击使背景在背景中可见

我是使用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

如何通过点击使背景在背景中可见

回答

相关问题