Question

通过点击，我有3个带动画的div。定位应用于100％大小，但是当缩小大小时，div周围会有一个空白区域。

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');
});

有没有办法正确对齐？如果没有，你能建议另一种方法来用图片缩放块吗？

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');
});

如何定位缩放元素（jQuery，css）

1 个答案: