Img在点击时扩展到100%(并且仍然停留在网格上）

Img expand to 100% on click (and still stick to grid)

本文关键字：停留在 网格 100% 扩展到 Img      更新时间：2023-09-26

这就是我正在处理的内容：http://jsfiddle.net/wppjq1a3/

$(document).ready(function(){
    $('.sec-img').click(function() {
        $(this).css({
            height: '100%',
            width: '100%'
        });
    });
});

我想让它做的是：

  • 当您单击任何图像时，它都会展开（如果上面有一个图像展开的图像；则小图像将被推到展开的图像

  • 此外，当您单击一个图像时，上一个展开的图像会收缩至原始尺寸（50%）。

  • 我想使用某种网格。图像都在继续以具有相同的尺寸比。我试着与…合作这个两列网格（底部和中间）之间有20px图像，但没有结果。

尝试一下：

http://jsfiddle.net/wppjq1a3/2/

我没有在jquery中添加css，而是切换了一个类。我添加了一个红色的背景色，这样当你在悬停时进行区分时，因为不透明度降低了，我想确保我点击的div出现在前面。我还添加了一个绝对位置，和一个z-

jQuery:

$(document).ready(function(){
    $('.sec-img').click(function() {
        $(this).toggleClass("expand");
    });
});

CSS：

.expand{
    width:100% !important;
    height:100% !important;
    position: absolute;
    z-index:999999 !important;
}
相关文章：