在圖像庫中添加淡入淡出效果

我有一個較小的圖像，它具有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 2013-04-30 13:26:32

我建議讓所有網頁上的圖片，放置在彼此的頂部。以下將增加由區域關聯到一個容器中的所有圖像，當您單擊然後交叉衰減......

<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

工作絕對完美，太棒了！ – 2013-04-30 13:49:55

要做到這一點，你需要創建一個新的形象和褪色舊了，並在新的

這應該工作：

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

你應該確保用新圖像位於主圖像背後的CSS。

來源（S）

jQuery API - .append()
jQuery API - fading

來源

2013-04-30 13:16:32 Bill

要淡入淡出，您只需淡入或淡出其中一張圖片，否則當兩者都達到50％時，您會看到背後的背景。淡入淡出過渡完成後，您可以刪除原始圖像。 – zzzzBov 2013-04-30 13:19:21

你說得對，我會編輯 – Bill 2013-04-30 13:23:41

剛試過這個，但沒有奏效。新圖像在屏幕頂部彈出，然後全部開始顯示。將jsfiddle它。 – 2013-04-30 13:32:07

在圖像庫中添加淡入淡出效果

回答

相關問題