调整图像大小并使邻居保持在原处? [英] 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屋！