网页中的几张图片以相同的方式缩放--如何实现？

Question

我是做图像处理的经验丰富的C++开发人员，但我有一个任务，创建一些网页来比较不同的结果，几种算法应用于一幅图像。

我在网络编程方面完全是新手，所以我的问题是，我应该使用什么工具来创建这样的网页？它应该显示几个图像:源图像及其由某些算法产生的变体。挑战是，我希望能够在不同位置以不同的放大倍数一次检查所有这些图像。

例如，初始页面可能看起来像这样，源图像在顶部：

​

​

然后我将鼠标光标悬停在源图像上，通过转动鼠标滚轮进行放大，并将其拖动到感兴趣的区域，所以现在我可以看到如下所示：

​

​

好了，仅此而已。我不需要任何漂亮的动画或花哨的字幕预览。这只是一项务实的任务。我认为，有几十种方法可以做到这一点，但是对于新手来说，最简单的方法是什么呢？

谢谢。也许这个问题应该发布在一些与web编程更相关的不同网站上？关于在哪里发布它的建议将是受欢迎的。

Answer 1

我认为你需要结合使用JS和CSS技巧(JS来控制CSS)。

例如，使用widht\height参数(CSS\HTML)缩放图像，然后使用负边距(CSS)设置视点，然后使用overflow:hidden on div wrapped on image裁剪图像。

我可以推荐您使用jQuery。

你可以用它来操作图像(http://api.jquery.com/animate/)

• You可以用它来跟踪鼠标(http://docs.jquery.com/Tutorials:Mouse_Position)和滚动(http://api.jquery.com/scroll/ )进行交互式缩放

• 还可以很容易地用.css方法来操作CSS

以下是 http://cs.scaytrase.ru/image_clip.html的示例

您可以使用.clipin类值(裁剪、顶部和左侧)控制图像以设置视口，并使用图像的宽度和高度参数来设置缩放

左侧缩略图为4倍放大右侧图片(原始1280x1024，缩放至500px )

通过公共.clipout类控制的图片大小

因此，您可以显示一个大图像，移动鼠标在它上面显示补丁，你需要在其他几个相同大小的图片。