0

我正在尝试创建一个画廊，但对 jQuery 来说是全新的，我陷入了一种僵局。

我想创建一个由几张小图片组成的画廊，这些图片在点击时会扩大到全宽，而在另一张图片上又会恢复到原来的样子。同时，我希望在单击图像展开时隐藏父包装中的所有其余 div。所有这些都必须顺利而漂亮地运行。那是我达不到的。所有图片都有 .image 类，每个图片都有 .one .two 类，以此类推。他们都在父母的包裹下。

$(".image").bind('click', function() {
     $(this).animate({width: "100%", height: "100%"}, 800);
$(".image").not(this).hide("slow");
});

$('.image').toggle(function(){
    $(this).animate({width: "100%", height: "100%"}, 800);    
}, function(){
    $(this).animate({width: "90px", height: "90px"}, 800);
    $(".image").not(this).show("slow");
});

我现在努力的结果http://jsfiddle.net/baltar/TRuNv/4/

这里是平滑的好例子http://css-tricks.com/examples/InfoGrid/

此外，动态调整父 div 的高度也很棒，因此任何比例的图像都适合。我试图将父母的高度设置为自动，但这没有用。

我意识到我的问题太大了，但也许至少有人可以建议我应该关注哪个方向。

提前致谢！

4

1 回答 1

1

以下 jQuery 完成了您所要求的大部分工作：

$(".image").bind('click', function() {
    var that = $(this), // caching the current element
        offsets = that.position(), // edited to use position() instead of offset()
        top = offsets.top,
        left = offsets.left,
        clone = that.clone(),
        parent = that.parent(), // caching the parent element
        width = parent.width(),
        height = parent.height();

    // adding the 'clone' element to the parent, and adding the 'clone' class-name    
    clone.addClass('clone').appendTo(parent).css({
        // positioning the element at the same coordinates
        // as the current $(this) element
        'top': top,
        'left': left
    }).animate({
        // animating to the top-left corner of the parent, and
        // to the parent's dimensions
        'top': 0,
        'left': 0,
        'width': width,
        'height': height
    }, 1000).click( // binding a click-handler to remove the element

    function() {
        // also fading the sibling elements back to full opacity
        $(this).fadeOut().siblings().animate({
            'opacity': 1
        }, 1000);
    }).siblings().animate({
        // fading-out the sibling elements
        'opacity': 0.1
    }, 1000);

});​

这需要CSS：

.wrap {
    /* your other unchanged CSS, and: */
    position: relative;
}
.clone {
    position: absolute;
}

JS 小提琴演示。

参考：

于 2012-11-24T00:12:07.617 回答