如何在网页图像（Javascript）上模拟放大镜？ [英] How to simulate magnifying glass on Web-page image (Javascript)?

问题描述

谷歌拥有最酷的效果 - 曾经是一个吃豆人的游戏，今天显然是第一届世界博览会成立160周年，而谷歌的标志就是它的一个形象。他们也把鼠标变成一个可以扫过图片（金戒指）的放大镜。

I不知道他们是怎么做到的。这显然是Javascript，我查看了页面源代码，但它不是特别可读（不奇怪）。

源代码，似乎他们正在使用相当基本的技术来实现这一点。

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

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

这里是一个简单的重构 example 。

另外示例，我们不会隐藏div溢出以将整个东西显示为正方形。

Google has the coolest effects - once it was a Pac-man game, today is apparently the 160th anniversary of the first World Fair, and Google's logo has an image of it. They also turn the mouse into a magnifying glass that can sweep over the picture (the gold ring).

I'm wondering how they do that. It's obviously Javascript, and I looked at the page source, but it's not especially readable (no surprise).

解决方案

Looking at their source code, it seems they are using rather basic techniques to achieve this.

Ignoring all the embedded nifty animated gif's, there are basically two images - large, and small of the entire scene. The larger image is repeated thrice in the document. Look at the annotated image below to get a better idea of how the zoom works.

The portion inside the magnifying circle is split up in three div's - top, mid, and bottom. The overflow for each div should be hidden. Each div is relatively positioned inside the zoom circle. On mouse move, change the absolute position of the zoom circle to the mouse coordinates. Their example also uses CSS3 for the scaling and adding some animation delays.

Here's a sorta minimal reconstructed example.

Another example where we don't hide the div overflow to reveal the entire thing as a square.

这篇关于如何在网页图像（Javascript）上模拟放大镜？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！