jquery box-alignment

我有一个（hopefuly）简单的问题..我创建了一个图像的网格视图。并且我希望它弹出，并显示您点击过的图像的更大图像。jquery box-alignment

但它简单地与浮法左。和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>

来源

2013-11-04 Mads Andersen

“我所有的代码都应该解释它”它没有。你可以添加一个小提琴的问题是可见的吗？ –

你想要一个灯箱或谷歌图像样式弹出？ –

无论如何你都不需要每个功能块。 –

如果你这样做了，它就会到位动画，但它涵盖了别人。

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

编辑：更新的链接。

来源

2013-11-04 14:32:49 spacebean

它看起来不错..但我只是想让其他人得到push'd而不是掩饰：/ –

jquery box-alignment

回答

相关问题