javascript - 如何在网页图像上模拟放大镜(Javascript)？

Question

Google 具有最酷的效果 - 曾经是吃 bean 人游戏，今天显然是第一届世界博览会 160 周年，Google 的 Logo 上有它的图像。他们还将鼠标变成了可以扫过图片(金戒指)的放大镜。

我想知道他们是怎么做到的。它显然是 Javascript，我查看了页面源代码，但它的可读性不是特别好(不足为奇)。

Answer 1

查看他们的源代码，他们似乎使用了相当基本的技术来实现这一目标。

忽略所有嵌入的漂亮动画 gif，基本上有两个图像 - 整个场景的大图像和小图像。较大的图像在文档中重复了三次。查看下面带注释的图像，以更好地了解缩放的工作原理。

放大圆内的部分分为三个 div - 顶部、中部和底部。每个 div 的溢出应该被隐藏。每个 div 都相对定位在缩放圆圈内。在鼠标移动时，将缩放圆圈的绝对位置更改为鼠标坐标。他们的示例还使用 CSS3 进行缩放和添加一些动画延迟。

这是一个最小的重建 example .

另一个example我们不隐藏 div 溢出以将整个事物显示为正方形。