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 i

Answer 1

There is a full example of magnifying any sort of HTML, including HTML5 at http://www.aplweb.co.uk/blog/js/magnifying-glass/. Works cross-browser too - although rounded corners are a bit iffy on most browsers - so you are going to have to use a box rather than circle.

Here is how to works:

1. Duplicate the content you want to zoom
2. Place the duplicated content into another element and set the visible width/height and overflow hidden
3. Use JavaScript to move the duplicated content so that it moves by the zoom amount * mouse movement. Also move the visible div by the mouse movement.

That is pretty much it too it. There are lots of little things to look out for though to make it work on all browsers.