如何在鼠标悬停时缩放图像而不影响其他图像位置？（JQuery）答案

【问题标题】：How to to zoom image on mouseover without affecting other image positions?(JQuery)如何在鼠标悬停时缩放图像而不影响其他图像位置？（JQuery）
【发布时间】：2012-09-29 16:55:47
【问题描述】：

我想得到类似谷歌图片的效果，当我们将鼠标悬停在任何图像上时，图像会弹出并出现在前面，而不会影响其他图像的原始位置。此外，这只发生在光标静止时，而不是我们随机移动时。

我尝试缩放图像，但其他图像失去了原来的位置。我的代码如下-->

$("img").mouseover(function(){
      $(this).css("cursor","pointer")
      $(this).animate({zoom: '107%'}, 'fast')

   }).mouseout(function(){
      $(this).animate({zoom: '100%'}, 'fast') 

   });

【问题讨论】：

您能提供标记吗？您的图像是否包装在自己的容器中？
如果你对 jquery 插件没问题，试试这个jquery.malsup.com/hoverpulse

标签： jquery html css

【解决方案1】：

在您的 CSS 中为您要缩放的图像添加 Z-index，该图像将在 z 坐标中弹出。想法是改变z-index，让图片弹出，而其他图片的z-index小于hovered，所以不会影响其他图片的位置。

$("img").mouseover(function(){
      $(this).css("z-index","2")
}

更新：延迟示例

$(function() {
        var timer;

        $('img').hover(function() {
                if(timer) {
                        clearTimeout(timer);
                        timer = null
                }
                timer = setTimeout(function() {
                        $(this).css("z-index","2"), 2000)
    },
    // mouse out
         clearTimeout(timer);
         $(this).css("z-index","1")
    });
});

试试这样的，查看帖子here

【讨论】：

感谢 z index 工作...但我还需要做一件事..我希望它仅在光标停留在那里超过 2 秒时才缩放..否则如果我只是在我的周围移动光标所有图像将继续缩放。只是谷歌图片中发生的事情，我该怎么办？
@Abhinav 检查更新的部分，有人为此建议了一个 jquery 插件，检查我共享的链接...

【解决方案2】：

<img style="position:absolute">

改变img样式属性位置绝对

【讨论】：