使用jQuery展开/缩小div

前端之家收集整理的这篇文章主要介绍了使用jQuery展开/缩小div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在寻找一个jQuery插件来扩展div元素,以便在悬停时显示它们的溢出(如果有的话)。插图:

插件应该在相对定位的div上工作(我猜想这意味着你创建一个div的副本,将其定位为绝对的,然后找出放置在哪里)。

有没有这样的插件已经可以在那里?

解决方法

这些图像在这里丢失了…但是这是几年前我把它拉下来的。基本理论是,所有的图像/ div都是绝对的,在自己的相对区域内。然后我动画左边和最重要的位置都是阴性的。这使它们突出在周围的盒子之上,看起来就像是弹出。 (当然你也需要确保这个的z-index比周围的z-index更高)。

jsFiddle DEMO

$(".img a img").hover(function() {
    $(this).closest(".img").css("z-index",1);

    // this is where the popping out effect happens
    $(this).animate({ height: "200",width: "200",left: "-=55",top: "-=55" },"fast");

},function() {
    $(this).closest(".img").css("z-index",0);
    $(this).animate({ height: "90",width: "90",left: "+=55",top: "+=55" },"fast");
});​

我对这两件事情的风格是:

.img { 
   position:relative; 
   z-index:0px;  
}

.img a img { 
   position:absolute;
   border:1px #1b346c solid; 
   background:#f1f1f1; 
   width:90px; 
   height:90px; 
}

猜你在找的jQuery相关文章