我正在寻找一个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;
}