调整图像大小并使邻居保持在原处? [英] Resizing an image and keep the neighbours where they are?
问题描述
在li元素中,我有6张彼此相邻的图像.现在,当我将鼠标悬停在其中之一时,我想调整该图像的大小.可行:
I have 6 images next to each other in li elements. Now when I hover one of them, I want to resize that image. That works:
<img class="hoverific" width="35" height="35" src="test.jpg" style="display: inline-block; width: 35px; height: 35px; overflow: hidden;">
CSS:
.hoverific {
text-align: center;
vertical-align: middle;
width: 35px;
height: 35px;
}
JS:
jQuery(".hoverific").hover(function() {
jQuery(this).stop().animate({
width: 360,
height: 360,
});
}, function() {
jQuery(this).stop().animate({
width: 35,
height: 35,
});
});
这将调整我悬停的图像的大小,但会弄乱周围的所有内容.我想要使用jQuery平滑调整悬停图像的大小.该方法正确吗,还是有更好的方法呢?
This resizes the image I hover, but messes up everything around. I want a smooth resize of the hovered image using jQuery. Is the approach correct, or is there a better way to do that?
谢谢!
推荐答案
您的问题的一种解决方案是更改正在调整大小的图像的边距:
A solution to your problem would be to change the margins of image that is being resized:
jQuery(".hoverific").hover(function() {
jQuery(this).css("z-index",2).stop().animate({
width: 360,
height: 360,
"margin-right": -325,
"margin-bottom": -325,
});
}, function() {
jQuery(this).css("z-index",1).stop().animate({
width: 35,
height: 35,
"margin-right": 0,
"margin-bottom": 0,
});
});
-325的边距更改来自-360 + 35(如果元素的初始边距为0).
如果边距不为0,则使用-360 + 35 +右边距(或底部边距)的值.
将position: relative;
添加到css中,以使z-index工作(否则,展开的对象可能会被其他对象部分覆盖).
The margin change of -325 comes from -360+35 (if the initial margins of the element is 0).
If the margins are not 0, then use -360 + 35 + the value of right (or bottom) margin.
Add position: relative;
to your css for the z-index to work (if not, your expanding object may be partially covered by the others).
这篇关于调整图像大小并使邻居保持在原处?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!