Comment simuler une loupe sur une image de page Web (Javascript)?
Google produit les effets le plus cool -, une fois que c'était un jeu Pac-man, aujourd'hui semble être le 160e anniversaire de la première exposition universelle, et le logo de Google en a une image. Ils aussi transforment la souris en une loupe pouvant balayer l’image (l’anneau d’or). 
Je me demande comment ils font ça. C'est évidemment du Javascript, et j'ai regardé la source de la page, mais ce n'est pas particulièrement lisible (sans surprise).
En regardant leur code source, il semble qu'ils utilisent plutôt des techniques de base pour y parvenir.
En ignorant tous les gif animés astucieux intégrés, il y a fondamentalement deux images - grande et petite de la scène entière. La plus grande image est répétée trois fois dans le document. Regardez l'image annotée ci-dessous pour avoir une meilleure idée du fonctionnement du zoom. 
La partie à l'intérieur du cercle grossissant est divisée en trois divisions: haut, milieu et bas. Le débordement de chaque div doit être masqué. Chaque div est relativement positionné à l'intérieur du cercle de zoom. Lorsque vous déplacez la souris, modifiez la position absolue du cercle de zoom en fonction des coordonnées de la souris. Leur exemple utilise également CSS3 pour la mise à l'échelle et l'ajout de retards d'animation.
Voici un peu reconstruit exemple .
Un autre exemple où nous ne cachons pas le débordement de div pour révéler le tout en tant que carré.
Tout d’abord, pour ceux qui souhaitent utiliser un tel effet, il existe une multitude de plug-ins jQuery. En voici quelques unes:
Deuxièmement, c'est assez facile à réaliser. Il suffit de charger l'image en taille réelle, mais de lui donner une width plus petite que sa largeur réelle afin qu'elle soit redimensionnée par CSS. Ensuite, utilisez JavaScript + CSS pour créer une div (la loupe) avec la même image en tant qu'arrière-plan, mais modifiez la propriété background-position en la coordonnée x,y mise à l'échelle correspondante sur laquelle se trouve actuellement la souris de l'utilisateur.
Je suppose qu'il existe d'autres moyens de le faire, et Google le fait peut-être différemment, mais c'est le moyen le plus évident pour moi qui me vienne à l'esprit.
Visitez http://codeblab.com/glass/ pour un exemple concret et une explication détaillée de cette technique. Flash et CSS v3 disposent de nombreuses fonctionnalités pour créer une loupe ronde. Cependant, simulate-a-circle-with-overlapping-rectangles fonctionne sur un grand nombre de plates-formes.
(DIVULGATION: codeblab.com est mon blog de passe-temps personnel avec des liens faibles vers mon travail aux Pays-Bas.)
Il existe un exemple complet d’agrandissement de tout type de HTML, y compris HTML5 à http://www.aplweb.co.uk/blog/js/magnifying-glass/ . Fonctionne également sur plusieurs navigateurs - bien que les angles arrondis soient un peu flou sur la plupart des navigateurs - vous devrez donc utiliser une boîte plutôt que des cercles.
Voici comment ça marche:
- Dupliquez le contenu que vous souhaitez zoomer
- Placez le contenu dupliqué dans un autre élément et définissez la largeur/hauteur visible et le débordement masqués
- Utilisez JavaScript pour déplacer le contenu dupliqué de sorte qu'il se déplace de la quantité de zoom * en déplaçant le mouvement de la souris. Déplacez également la div visible par le mouvement de la souris.
C'est à peu près ça aussi ça. Cependant, il y a beaucoup de petites choses à surveiller pour que cela fonctionne sur tous les navigateurs.
Je ne sais pas comment Google le fait, car le logo n'apparaît plus dans ma région. mais cet effet peut être obtenu en découpant le GIF animé agrandi sur l'image normale à l'aide de la zone de dessin. Alternativement, il est également possible de créer une coupure circulaire en utilisant CSS border-radius (couramment utilisé pour implémenter des angles arrondis).
EDIT: J'ai hacké cela ensemble pour montrer la technique de base dont vous avez besoin si vous utilisiez CSS border-radius: http://jsfiddle.net/yjBuS/
On dirait qu'ils utilisent deux images, une pour le logo et une pour le zoom (celle qui est zoomée est en fait découpée pour exécuter les animations séparément ...?). Elles détectent probablement si la souris survole le logo normal, puis affiche le cercle jaune et attachez-le à la position de la souris. Montrez ensuite l’autre image, en la déplaçant en face de la souris. Ou quelque chose de similaire.