調整圖片的大小點擊

因此，我試圖製作一個簡單的照片庫，當您點擊它們時會放大，然後在您再次單擊它們時返回到較小的尺寸。我有擴大部分工作，但到目前爲止，我只能通過使用「.mouseout」與JQuery，這不是我想要的縮小圖片。另外，我希望圖像在放大時可以放在所有其他圖像/ div上面，現在它可以被任何其他圖像覆蓋到左側或右側。這裏是我的代碼，並在底部調整圖片的大小點擊

HTML

<div id="Gpic1"> 
    <img id='table' src='http://i.imgur.com/7ESpNI8.jpg'> 
</div>

CSS

#Gpic1 { 
    width: 280px; 
    height: 187px; 
    display: block; 
    background: black; 
} 
#table { 
    width: 280px; 
    height: 187px; 
}

一個的jsfiddle鏈接的JQuery

$('#Gpic1').hover(function() { 
    $(this).find('img').fadeTo(500, 0.5); 
}, function() { 
    $(this).find('img').fadeTo(500, 1); 
}); 

$('#table').click(function() { 
    $('#Gpic1').find('img').fadeTo(0, 1); 
    $("#table").stop().animate({ 
     width: 800, 
     height: 533 
    }, 200); //Bigger 
}).mouseout(function() { 
    $("#table").stop().animate({ 
     width: 280, 
     height: 187 
    }, 200); //Smaller 
});

http://jsfiddle.net/kmx6C/

謝謝

來源

2013-10-25 Andrew

您可以將類enlarged添加到您正在放大的元素，然後檢查圖像當前是否放大。

if($('#table').hasClass('enlarged')){ 
     $('#table').removeClass('enlarged'); 
     $("#table").stop().animate({width: 280, height: 187}, 200); 
    }else{ 
     $('#table').addClass('enlarged') 
     $("#table").stop().animate({width: 800, height: 533}, 200); 
    }

小提琴：http://jsfiddle.net/4LUYM/

來源

2013-10-25 23:06:18 orhanhenrik

這對於將圖像調整爲原始大小非常有效，謝謝！有關如何讓它坐在所有其他div上的想法？我試着給這個類添加一個z-index，這樣當它被添加時它獲得了1個索引，但它沒有工作:( – Andrew

@Andrew檢查了這個：http://jsfiddle.net/4LUYM/2/它是一個更通用的方法（與類），並像你描述的作品 – orhanhenrik

這看起來像一個很好的方法。現在唯一的問題是，當圖像放大點擊時，它保持褪色到0.5而不是1。http：// jsfiddle .net/4LUYM/3/ – Andrew

您將需要跟蹤圖像是否擴大或正常：

見這裏：http://jsfiddle.net/kmx6C/4/

if ($(e.target).hasClass('expanded')) { 
    $("#table").removeClass('expanded').stop().animate({ 
     width: 280, 
     height: 187 
    }, 200); 
} else { 
    $('#Gpic1').find('img').fadeTo(0, 1); 
    $("#table").addClass('expanded').stop().animate({ 
     width: 800, 
     height: 533 
    }, 200); 
}

如果你要仍然使用mouseout事件，那麼您需要確保刪除該課程：

$("#table").removeClass('expanded').stop().animate({ 
    width: 280, 
    height: 187 
}, 200);

至於製作是「坐」在其他圖像的頂部，您需要確保相應地設置了「z-index」和「position」。

來源

2013-10-25 23:10:47 anAgent

真棒，謝謝！我添加了絕對定位和工作，不知道爲什麼z-index沒有。 – Andrew

調整圖片的大小點擊

回答

相關問題