在其他圖像的網格上展開並重疊圖像

我一直在用jQuery與整晚戰鬥，在這裏變得相當沮喪，所以請原諒我，如果答案是盯着我的臉。在其他圖像的網格上展開並重疊圖像

我有一個包含在一個<div>內的15個圖像的5x3網格，當我點擊其中的一個時，我希望它擴大到原始大小150x105的三倍，並與其餘部分重疊。我已經擴大了規模，但重疊並不是很有效。

我目前的HTML：

<div id="image-grid"> 
     <img src="images/after-pictures/1.jpg" class="igc1" /> 
     <img src="images/after-pictures/2.jpg" class="igc2" /> 
     <img src="images/after-pictures/3.jpg" class="igc3" /> 
     <img src="images/after-pictures/4.jpg" class="igc4" /> 
     <img src="images/after-pictures/5.jpg" class="igc5" /> 
     <img src="images/after-pictures/6.jpg" class="igc1" /> 
     <img src="images/after-pictures/7.jpg" class="igc2" /> 
     <img src="images/after-pictures/8.jpg" class="igc3" /> 
     <img src="images/after-pictures/9.jpg" class="igc4" /> 
     <img src="images/after-pictures/10.jpg" class="igc5" /> 
     <img src="images/after-pictures/11.jpg" class="igc1" /> 
     <img src="images/after-pictures/12.jpg" class="igc2" /> 
     <img src="images/after-pictures/13.jpg" class="igc3" /> 
     <img src="images/after-pictures/14.jpg" class="igc4" /> 
     <img src="images/after-pictures/15.jpg" class="igc5" /> 
    </div>

的igc*類代表的是行的影像是

CSS：

#image-grid { 
    border: 1px solid #aaa; 
    width: 745px; 
    padding: 5px 2px 2px 5px; 
} 

#image-grid img { 
    width: 150px; 
    height: 105px; 
    margin: -2px; 
}

的jQuery：

$('#image-grid img').click(function() { 
    $(this).animate({ 
     width: '450px', 
     height: '315px', 
     zIndex: '10' 
    }, 200); 
});

來源

2010-06-16 soren121

成纔像這裏這樣的效果？ http://jsbin.com/evifa3 – Reigel 2010-06-16 05:56:12

就是這樣的，是的。試想一下，一個3x3的圖像網格。當我懸停或點擊一個，我希望它擴大並填充3x3網格。 – soren121 2010-06-16 06:04:08

有點像這樣...

$('#image-grid img').click(function() { 
    $(this).animate({ 
     width: '450px', 
     height: '315px' 
    }, 200) 
    .css({ 
     'z-index': function (i, z) { 
      return z + 10; 
     }, position: 'absolute', 
     left: 0, 
     top: 0 
    }) 
    .siblings().css({ 
     'z-index': function (i, z) { 
      return z - 10; 
     }, position: 'static', 
     width: '150px', 
     height: '105px', 
     left: 'auto', 
     top: 'auto' 
    }); 
});

讓我知道什麼是效果..

來源

2010-06-16 06:14:39 Reigel

該代碼在Firefox和Chrome中沒有任何效果，恐怕。雖然你知道'img'標籤沒有兄弟姐妹，對嗎？ – soren121 2010-06-16 06:23:14

我不知道什麼不適合你，但這裏是一個演示... http://jsfiddle.net/mMuYF/2/並由你的html結構給出，img標籤有很多img標籤，因爲它是兄弟姐妹。 – Reigel 2010-06-16 06:33:35

哦，我把兄弟姐妹和孩子混淆了。哎呀。 – soren121 2010-06-16 06:39:08

可能是th在你試圖將z-index應用於還沒有被賦予位置絕對屬性的元素時？

來源

2010-06-16 05:56:16 danjah

你並不需要絕對......相對就好......而且，如果你的目的只是真正的Z指數，絕對定位會帶來很多麻煩...... – Reigel 2010-06-16 05:58:32

不受jQuery影響的圖像沒有一個定位。我試圖給他們添加一個z-index。沒有幫助，所以我刪除了它，但它仍然無法工作。我不想絕對，因爲那樣我就必須經過併爲每個圖像設置像素值，並且這種打敗我的簡單目標。 – soren121 2010-06-16 05:58:44

對不起，是的，我的發言應該更加寬泛 - 你可能只需要應用一般的定位，所以t/r/b/l的值就會保持不變。正如Reigel提到的，應用位置：相對於圖像預先。或找到像上面那樣的修復！：P – danjah 2010-06-16 22:03:51

在其他圖像的網格上展開並重疊圖像

回答

相關問題