我正在寻找一个jQuery插件来扩展div元素,以便在悬停时显示它们的溢出(如果有的话)。插图:
插件应该在相对定位的div上工作(我猜想这意味着你创建一个div的副本,将其定位为绝对的,然后找出放置在哪里)。
有没有这样的插件已经可以在那里?
解决方法
这些图像在这里丢失了…但是这是几年前我把它拉下来的。基本理论是,所有的图像/ div都是绝对的,在自己的相对区域内。然后我动画左边和最重要的位置都是阴性的。这使它们突出在周围的盒子之上,看起来就像是弹出。 (当然你也需要确保这个的z-index比周围的z-index更高)。
$(".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; }