Добавить эффект перекрестного затухания в галерее изображений

У меня есть меньшее изображение, которое имеет элемент управления с 8 кнопками, я установил 8 областей, поэтому, когда нажимается кнопка мыши, основное изображение обновляется.Добавить эффект перекрестного затухания в галерее изображений

При нажатии на форму области изображения соответствующее изображение загружается, но я хочу, чтобы изображение исчезло, а старое изображение исчезло.

Возможно ли это? С удовольствием исследуем решения Javascript и JQuery. Благодарю.

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>TEST</title> 
<script type="text/javascript"> 
function showImage(image){ 
    var mainImage = document.getElementById('mainImage'); 
    mainImage.src = image; 
} 
</script> 
</head> 

<body> 
<div><img src="button.jpg" width="260" height="193" border="0" usemap="#Map" /> 
<map name="Map" id="Map"> 
<area shape="rect" coords="61,21,120,55" href="#" onclick="showImage('A.jpg')" /> 
<area shape="rect" coords="147,21,205,54" href="#" onclick="showImage('B.jpg')" /> 
<area shape="rect" coords="60,58,121,90" href="#" onclick="showImage('C.jpg')" /> 
<area shape="rect" coords="147,59,205,92" href="#" onclick="showImage('D.jpg')" /> 
<area shape="rect" coords="61,92,121,125" href="#" onclick="showImage('E.jpg')" /> 
<area shape="rect" coords="146,96,205,128" href="#" onclick="showImage('F.jpg')" /> 
<area shape="rect" coords="60,128,122,163" href="#" onclick="showImage('G.jpg')" /> 
<area shape="rect" coords="146,131,204,164" href="#" onclick="showImage('I.jpg')" /> 
</map> 
</div> 
<div> 
<img id="mainImage" src="A.jpg" /> 
</div> 

</body> 
</html>

источник

2013-04-30 Darren Riches

Даррена, я отвечал на подобный вопрос, вы не слишком давно (8 дней) [здесь] (http://stackoverflow.com/questions/16150060/gallery-with-thumbnails-that-update-a-main-image/16150390#16150390), вы могли бы сработать с этого? – Bill

Я предложил бы иметь все изображения на странице, расположенные друг над другом. Ниже добавит все изображения, связанные с площадью в контейнер затем кроссфейд при нажатии ...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery(function($){ 
    $('#Map area').each(function(){ 
     var area = $(this); 
     var img = $('<img>').attr('src', area.attr('href')); 
     $('#imgcontainer').append(img); 
     area.click(function(){ 
      $('#imgcontainer img').stop().fadeOut(); 
      img.stop().fadeIn(); 
      return false; 
     }) 
    }); 
    $('#imgcontainer img:first-child').show(); 
}); 
</script> 
<style> 
    #imgcontainer{width:260px;height:193px;} 
    #imgcontainer img{display:none;position:absolute;} 
</style> 
<img src="button.jpg" width="260" height="193" border="0" usemap="#Map" /> 
<map name="Map" id="Map"> 
    <area shape="rect" coords="61,21,120,55" href="A.img" /> 
    <area shape="rect" coords="147,21,205,54" href="B.img" /> 
    <area shape="rect" coords="60,58,121,90" href="C.img" /> 
    <area shape="rect" coords="147,59,205,92" href="D.img" /> 
    <area shape="rect" coords="61,92,121,125" href="E.img" /> 
    <area shape="rect" coords="146,96,205,128" href="F.img" /> 
    <area shape="rect" coords="60,128,122,163" href="G.img" /> 
    <area shape="rect" coords="146,131,204,164" href="I.img" /> 
</map> 
<div id="imgcontainer"></div>

источник

2013-04-30 13:44:12 eeun

Работал абсолютно отлично, отлично! –

Для этого вам нужно будет создать новый образ и исчезать старые одну из них и новый в

Это должно работать:.

function showImage(image){ 
    var mainImage = document.getElementById('mainImage'); 
    $('#mainImage').before('<img src="' + image + '" id="newImage" />'); 
    $('#mainImage').fadeOut().remove(); 
    $('#newImage').attr('id','mainImage'); 
}

Вы должны убедиться, что с CSS, что новое изображение расположено за основным.

Источник()

jQuery API - .append()
jQuery API - fading

источник

2013-04-30 13:16:32 Bill

Для кроссфейда вам нужно будет только затухать или исчезнуть с одного из двух изображений, иначе, когда оба будут на 50%, вы увидите фон позади них. После завершения перехода к постепенному исчезновению вы можете удалить исходное изображение. – zzzzBov

Вы правы, я отредактирую – Bill

Просто попробовал, но это не сработало. Новое изображение появляется в верхней части экрана, после чего все они начинают отображаться. Будет jsfiddle его. –

Добавить эффект перекрестного затухания в галерее изображений

ответ

Смежные вопросы