2

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

我试图缩放图像，但其他图像正在失去其原始位置。我的代码如下-->

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

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

   });
4

2 回答 2

2

在你的 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")
    });
});

试试这样的东西，在这里查看帖子

于 2012-09-28T12:06:32.427 回答
0 
<img style="position:absolute">

更改 img 样式属性位置绝对

于 2012-09-28T12:02:43.027 回答