2

我有一个（希望）简单的问题。我创建了一个图像的网格视图。我希望它弹出，并显示你点击的图像的更大图像。

但它只是用左浮动制成的。和 jquery 动画高度/宽度。但有时会有一个空白的地方，我希望它也可以使用。

我所有的代码都应该解释它:)

<html>
<head>
    <title></title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<style type="text/css">
    .img{
        margin:5px;
        height:138px;
        width:138px;
        border:solid 1px red;
        float: left;
    }
</style>

<script type="text/javascript">

$(document).ready(function(){
    $('.img').click(function(){

        $('.img').each(function(){
            $(this).animate({
            height: '138px',
            width: '138px'
            },200);
        });
        if($(this).width() > 139){
            $(this).animate({
            height: '138px',
            width: '138px'
        },200);
        }else{
            $(this).animate({
                height: '288px',
                width: '288px'
            },200);
        }
    });
});

</script>
<body>
    <div style="height:800px;width:600px;border:solid 1px green;overflow:auto;">

        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>

    </div>
</body>

4

1 回答 1

0

If you do it this way, it will animate in place, but it covers the others.

http://jsfiddle.net/RLxD7/1/

$('.img').click(function(){

    if($(this).width() > 139){
        $(this).animate({
        height: '138px',
        width: '138px',
            margin: '5px'
    },200);
    }else{
        $(this).animate({
            height: '288px',
            width: '288px',
            margin: '5px -145px -150px 5px',
            zIndex: '9999'
        },200);
    }
});

Edit: updated link.

于 2013-11-04T14:32:49.630 回答