Question

我似乎很难找到一个能够放大图像的插件，同时让图像的 rest 保持相同的大小。

我之所以需要它，是因为我正在使用图像地图并尝试放大特定大陆上的图像。一旦放大，我将用我们放大的图像替换为特定大陆的新图像和图像映射。当发生这种情况时，我不希望世界其他地图改变大小。

有没有人知道这个好的插件？

Answer 1

我找到了一个似乎能够展示您想要的内容的教程，以及如何到达目的地的说明：http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3

编辑：根据贾斯汀的评论：

我在这里谈论的是一个实际的缩放动画。不仅仅是替换它，因为我可以做一个淡入淡出的动画。

使用jQuery的animate（）方法来实现这一目标。

代码：

$(function(){
    $('#zoomimage').click(function(){
        $(this).animate({height:'150%', width:'150%'}, 500);
    });
});

编辑：根据贾斯汀的下一条评论：

嘿Aditya，唯一的问题是尺寸受到影响。有没有办法在它增长时裁剪它以保持相同的大小？

这可以通过操纵图像的容器来隐藏图像的其余部分来完成。像这样：

<div style="width:275px; height:95px; overflow:hidden;">
    <img src="https://www.google.com/images/srpr/logo3w.png" id="zoomimage" />
</div>

overflow:hidden;确保图片的其余部分不会显示。

Answer 2

这是你的解决方案，我对项目中的地图使用完全相同，

祝你好运：）