html - How to simulate magnifying glass on Web-page image (Javascript)?

Question

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).

Answer 1

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.