我正在寻找一个jQuery
插件来展开div
元素,以便在悬停时显示它们的溢出(如果有的话)。插图:
该插件应该在相对定位的div
上运行(我想这意味着您创建了div
的副本,将其定位设置为绝对,然后找出放置它的位置)。
那里有这样的插件吗?
答案 0 :(得分:27)
您不需要插件。 只需添加适当的css并使用jQuery animate:
$div
.on('mouseenter', function(){
$(this).animate({ margin: -10, width: "+=20", height: "+=20" });
})
.on('mouseleave', function(){
$(this).animate({ margin: 0, width: "-=20", height: "-=20" });
})
答案 1 :(得分:25)
这里缺少图片......但是几年前我就是这样做的。基本理论是所有的图像/ div都是绝对的,在它们自己的相对区域内。然后,我为left & top
位置-negatively
制作动画。这使它们突出于周围的盒子上方,看起来像是弹出的。 (当然你还需要确保这个z-index的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;
}
答案 2 :(得分:1)
感谢@MarkPieszak。对于动态创建的元素,请使用
$(document).on({
mouseenter: function () {
$(this).animate({ height: "200", width: "200", left: "-=55", top: "-=55" }, "fast");
},
mouseleave: function () {
$(this).animate({ height: "90", width: "90", left: "+=55", top: "+=55" }, "fast");
}
}, '.img a img');
.hover()
仅适用于静态元素。更多here
答案 3 :(得分:0)
你可以用css完全做到这一点,这是来自我的网站的snipet,我很懒得编辑它,但你明白了:
<ul class="hover">
<li style="margin-top:40px;"">
<a href=""><img src="images/Home/Home.jpg" alt="home" style="width:130px; height:100px;"/>
<img src="images/Home/Home.jpg" alt="home" class="preview" style="width:180px; height:150px;"/></a>
</li>
<li style="margin-left:55px; margin-top:-20px;">
<a href=""><img src="images/About/About.jpg" alt="About The Author" style="width:200px; height:200px;"/>
<img src="images/About/About.jpg" alt="About The Author" class="preview" style="width:250px; height:250px;"/></a>
</li>
</ul>
的CSS:
/* begin hover */
.hover{
cursor: default;
list-style: none;
}
.hover a .preview{
display: none;
}
.hover a:hover .preview{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}
.hover img{
background: white;
border-color: black;
border-style: solid;
border-width: 4px;
color: inherit;
padding: 2px;
vertical-align: top;
-moz-border-radius: 15px;
border-radius: 15px;
}
.hover li{
background: black;
border-color: black;
border-style: solid;
border-width: 1px;
color: inherit;
display: block;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
.hover .preview{
border-color:black;
border-width:8px;
border-stle:solid;
}
li{
-moz-border-radius: 15px;
border-radius: 15px;
}
那里有一些不需要的款式,但是你又得到了这个想法。基本上你只是在悬停
上显示原始图像上方的一个图像答案 4 :(得分:0)
如果是文字,那就更复杂了......
我这样用:
$('.floating').mouseenter(function(){
const $this = $(this);
const dimension = $this.data('dimension');
const ratioEnlarged = 2;
const tempElement = $this.clone();
tempElement.appendTo('body');
tempElement.css({
width: dimension.width,
height: dimension.height
});
if(tempElement.is(':offscreen')){
// Change this to animate if you want it animated.
$this.css({
'margin-left': -dimension.width * ratioEnlarged/2,
'margin-top': -dimension.height * ratioEnlarged/4,
'font-size': ratioEnlarged + 'em',
width: dimension.width * ratioEnlarged,
height: dimension.height * ratioEnlarged
});
} else {
$this.css({
'margin-left': -dimension.width * ratioEnlarged/4,
'margin-top': -dimension.height * ratioEnlarged/4,
'font-size': ratioEnlarged + 'em',
width: dimension.width * ratioEnlarged,
height: dimension.height * ratioEnlarged
});
}
tempElement.remove();
});
$('.floating').mouseleave(function(event) {
const $this = $(this);
const dimension = $this.data('dimension');
if(!$this.hasClass('context-menu-active')){
$this.css({
margin: 0,
'font-size': '1em',
width: dimension.width,
height: dimension.height
});
}
});