0

当用户将鼠标悬停在图像上时，我正在尝试创建弹出图像。我有以下代码，但放大的图像会破坏我的布局流程。我想知道是否有更好的方法可以在不破坏布局的情况下弹出图像。非常感谢！

   $('#image_layout img').live("hover", function(){
          var $this=$(this);

          $(this).animate({width: "30%", height: "30%"}, 'slow');

       })   not working properly.
4

4 回答 4

2

实际上，您可以在支持它的浏览器上使用 css 来做到这一点。

#image_layout img {
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
    transition: all 2s;
    -moz-transition: all 2s;
    -webkit-transition: all 2s;
    -o-transition: all 2s;
});

#image_layout img:hover {
    transform: scale(1.3);
    -ms-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -o-transform: scale(1.3);
    -moz-transform: scale(1.3);
    transition: all 2s;
    -moz-transition: all 2s;
    -webkit-transition: all 2s;
    -o-transition: all 2s;
});
于 2012-08-02T00:33:04.667 回答
0

而不是调整图像本身的大小，您应该使用相同的图像显示一个单独的 div，并调整该 div+图像的大小。

于 2012-08-02T00:28:59.607 回答
0

当您尝试弹出窗口时，我建议您在您的网站上有一个位置：固定覆盖。

您应该有一个 div，它通常是隐藏的，但仅在用户按下图片时显示。div 应该是 position: fixed 或 absolute，这样它就不会在你的布局中流动，而只是显示在所有其他内容的顶部

<html>
<head><tile>My awesome title</title><head>
<body>
    <div id="photoviewer" style="display: none; position:fixed; top: xx; left: xx">
        <!--Your awesome photoviewer here -->
    </div>
    <!-- The rest of the content of your website here :) -->
</body>
</html>

然后使用 JQuery 显示和取消显示 div "photoviewer"

编辑：如果你想制作一个照片查看器，这会起作用，但是使用一些 javascript/jquery 魔法，你也可以制作你想要的悬停:)，然后位置参数应该设置为绝对，我猜。

于 2012-08-02T00:34:23.647 回答
-1

为什么不使用 css，使用绝对位置和边距来阻止它破坏布局。

#image_layout img {
    position:absolute;
    margin:_ _ _ _;
}
于 2012-08-02T00:29:16.527 回答