Question

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

我试图缩放图像，但其他图像正在失去其原始位置。我的代码为 - ＆gt;

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

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

   });

Answer 1

在CSS中为要缩放的图像添加Z-index，图像将在z坐标中弹出。我们的想法是更改Z-index以便弹出图像，而其他图像的z-index小于悬停的图像，因此不会影响其他图像的位置。

$("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

Answer 2

<img style="position:absolute">

更改img样式属性位置绝对

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

2 个答案: