簡體   English   中英

在圖庫上添加交叉漸變效果

[英]Add a cross fade effect on an image gallery

我有一個較小的圖像,它是一個帶有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>

要做到這一點,你需要創建一個新的圖像並淡出舊的圖像和新的圖像。

這應該工作:

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 - 褪色

我建議將頁面上的所有圖像放在彼此的頂部。 下面將所有鏈接到該區域的圖像添加到容器中,然后在單擊時交叉淡入淡出...

<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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM