jquery - 如何定位缩放元素(jQuery、css)

Question

我有 3 个带有点击动画的 div。定位应用于 100% 大小，但是当大小被重新使用时，div 周围有一个空白区域。

Jsfiddle example

HTML:

<div class='container'>
    <div class='boxes-min' id='box1'>
        <div class='item1'>
            <img src='http://www.festivalsofindia.in/img/Img.jpg'>
        </div>           
        <div class='item2'>
            <img src='http://www.festivalsofindia.in/img/Img.jpg'>
        </div>
        <div class='item3'>
            <img src='http://www.festivalsofindia.in/img/Img.jpg'>
        </div>
    </div>

    <div class='boxes-min' id='box2'>
        <div class='item1'>
            <img src='http://www.festivalsofindia.in/img/Img.jpg'>
        </div> 
        <div class='item2'>
            <img src='http://www.festivalsofindia.in/img/Img.jpg'>
        </div>
        <div class='item3'>
            <img src='http://www.festivalsofindia.in/img/Img.jpg'>
        </div>
    </div>

    <div class='boxes-min' id='box3'>
        <div class='item1'>
            <img src='http://www.festivalsofindia.in/img/Img.jpg'>
        </div>            
        <div class='item2'>
            <img src='http://www.festivalsofindia.in/img/Img.jpg'>
        </div>
        <div class='item3'>
            <img src='http://www.festivalsofindia.in/img/Img.jpg'>
        </div>
    </div>
</div>

CSS:

.container {
    position: relative;
    width: 970px;
}

.boxes-min {   
    width: 200px;
    height: 200px;
    background: #999;
    position: absolute;
    top: 400px;
    overflow: visible;
    white-space: nowrap;

}


.scaled {
     left: 50% !important;
     margin-left: 50px !important;
}

#box1 {
    left: 0;            
}

#box2 {
    left: 50%;
    /*right: 50%; */
    margin-left: -10%;
}

#box3 {
    right: 0;    
}

.item1, .item2, .item3 {
    display: inline;
    position: relative;     
}

JS:(注意 library )

$('.boxes-min').scale(0.2);

$('body').on('click', '.boxes-min', function() {
    $(this).animate(
        {top: "0", scale: '1'},
        {duration: 1000}).removeClass('boxes-min').addClass('scaled');
    $(this).siblings().animate(
        {scale: '0.2', top:'400px'},
        {duration: 1000}).addClass('boxes-min').removeClass('scaled');
});

有什么方法可以正确对齐吗？如果没有，您能否建议另一种方法来缩放带有图片的 block ？

Answer 1

实际上我还没有找到一种方法来定位缩放元素而不需要在 js 中进行繁琐的计算。现在缩放会影响图像，默认情况下容器很小

JSfiddle

$('#box2').css("margin-left", "-" + $("#box2").width() / 2 + "px");
$('body').on('click', '.boxes-min', function() {
    $(this).find('img').animate(
        {width: "250px", height: "auto", marginLeft: "0px"},
        {duration: 1000, queue: false });

    $(this).animate(
        {top: '0'},
        {duration: 1000, queue: false }).removeClass('boxes-min').addClass('scaled');

    $(this).siblings().find('img').animate(
        {width:"20px", marginLeft:'0px'},
        {duration: 1000, queue: false});

    $(this).siblings().animate(
        {top: '400px'},
        {duration:1000, queue: false}).addClass('boxes-min').removeClass('scaled');
});