前端之家收集整理的这篇文章主要介绍了
如何在网页图像(Javascript)上模拟放大镜？，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
Google具有最酷的
效果 – 一旦是一个吃豆人的游戏，今天显然是第一届世博会诞辰160周年，Google的标志也是一个形象。他们还将鼠标转换成可以扫过
图片(金戒指)的放大镜。
我想知道他们是如何做到的这显然是Javascript，我看着页面的源码，但它并不是特别可读的(没有什么惊喜)。
看看他们的源
代码，似乎他们使用相当基本的技术来实现这一点。
忽略了所有嵌入的漂亮的动画GIF，基本上有两个图像 – 整个场景都很大，很小。较大的图像在文档中重复三次。看看下面的注释图像，以更好地了解缩放如何工作。
放大镜中的部分分为三个顶部，中间和底部。每个div的溢出应该被隐藏。每个div相对位于缩放圈内。在鼠标移动时，将缩放圆的绝对位置更改为鼠标坐标。他们的例子也使用CSS3来缩放和添加一些动画延迟。
这是一个最小重建的example。
另一个example，我们不会隐藏div的溢出，将整个东西作为一个广场。
原文链接：https://www.f2er.com/html/232920.html
