javascript - jQuery 缩放插件？

Question

我似乎很难找到一个插件，它可以放大我的图像，同时让图像的其余部分保持相同的大小。

我需要它的原因是因为我正在使用图像地图并试图放大特定大陆上的图像。一直放大后，我将用该特定大陆的新图像和图像地图替换我放大的图像。当这种情况发生时，我不希望世界地图的其他地方改变大小。

有谁知道这个的好插件吗？

Answer 1

我找到了一个教程，它似乎展示了一些接近你想要的东西，以及如何到达那里的说明：http: //thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3

这是另一个： http: //mlens.musings.it/

编辑：基于贾斯汀的评论：

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

使用 jQuery 的 animate() 方法来实现这一点。

代码：

$(函数(){
    $('#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

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

http://www.jacklmoore.com/zoom

祝你好运 ：）