Question

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

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

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

       })   not working properly.

Answer 1

你实际上可以在支持它的浏览器上使用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;
});

Answer 2

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

Answer 3

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

您应该有一个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魔法你想要拥有的悬停:)，那么位置参数应该设置为绝对，我猜。 / p>

Answer 4

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

#image_layout img {
    position:absolute;
    margin:_ _ _ _;
}

如何创建弹出图像（不喜欢插件）

4 个答案: