이미지를 클릭 할 때 배경 이미지 변경

Question

가능한 한 구체적으로 만들려고합니다. 내 웹 사이트에는 9 개의 포트폴리오 아이콘이 있습니다. 하나를 클릭하면 div의 "배경 이미지"가 위에 변경됩니다. 나는 페이드 인 (fade-in)하는 것이 바람직하다. 어떤 도움을 크게 감상 할 수

<div class="work-header"></div> 

:

<ul class="gallery"> 
    <li><a href="#" class="thumb"><span><img src="images/work-icon-1.jpg" alt="" /></span></a></li> 
    <li><a href="#" class="thumb"><span><img src="images/work-icon-2.jpg" alt="" /></span></a></li> 
    <li><a href="#" class="thumb"><span><img src="images/work-icon-3.jpg" alt="" /></span></a></li> 
    <li><a href="#" class="thumb"><span><img src="images/work-icon-4.jpg" alt="" /></span></a></li> 
    <li><a href="#" class="thumb"><span><img src="images/work-icon-5.jpg" alt="" /></span></a></li> 
    <li><a href="#" class="thumb"><span><img src="images/work-icon-6.jpg" alt="" /></span></a></li> 
    <li><a href="#" class="thumb"><span><img src="images/work-icon-7.jpg" alt="" /></span></a></li> 
    <li><a href="#" class="thumb"><span><img src="images/work-icon-8.jpg" alt="" /></span></a></li> 
    <li><a href="#" class="thumb"><span><img src="images/work-icon-9.jpg" alt="" /></span></a></li> 
</ul> 

이 나는 ​​그들이 클릭 아이콘에 따라 변경이 필요 사업부는 다음과 같습니다

이

포트폴리오 아이콘에 대한 코드입니다.

Answer 1

배경 이미지를 어떻게 바꾸시겠습니까?

$('.thumb').click(function() { 
    $('#word-header').css('background-image', 'url("img.jpg")'); 
}); 

기본 구문은 무엇입니까? 조금 더 정교하게 그리고 나는 이것을 새롭게 할 것이다.

당신과 같이, 각 아이콘 상에 HTML5 '데이터 -'속성으로 배경 이미지를 저장할 수 있습니다 편집 :

<img src="images/work-icon-1.jpg" alt="" data-header-img="images/header-1.jpg" /> 

그리고이 같은 jQuery를 수행

$('.thumb').click(function() { 
    $('#word-header').css('background-image', "url("+$(this).attr('data-header-img')+")"); 
}); 

이미지가 흐려지는 것은 더 복잡합니다. Google에서 여러 가지 해결책을 찾을 수 있습니다. 또는 누군가가 여기에 시간을내어 어떻게 보이는지 알 수 있습니다.

Answer 2

배경이 흐릿 해지는 것은 사실 훨씬 더 복잡 할 수 있지만 상황에 따라 문제의 요소 뒤에 절대 위치 지정된 div가 사라지는 방식으로 약간 다른 접근 방식을 사용할 수 있습니다. This fiddle은 이것을 설명합니다. 기본적으로 필요한 JQuery와는 다음과 같습니다

$("#btn1").click(function() { 
    $("#img1").fadeIn(1000); 
    return false; 
}); 

그러나 물론 당신이 더 버튼의 목록을 처리하고 이전에 페이드 아웃 "배경"를 클릭하는 것을 확대 할 것입니다. 당신의 답장 모두

$(".thumb").click(function() { 
    var bgElementId = $(this).attr("data-bgElementId"), 
     bgElement = $("#" + bgElementId); 

    bgElement.fadeIn(1000); 
    $(".allBGs").not(bgElement).fadeOut(1000); 
    return false; 
});