it-swarm.com.de

Wie simuliert man eine Lupe auf einem Webseitenbild (Javascript)?

Google hat die coolsten Effekte - früher war es ein Pac-Man-Spiel, heute ist anscheinend der 160. Jahrestag der ersten Weltausstellung, und das Google-Logo hat ein Bild davon. Sie auch verwandeln die Maus in eine Lupe, die über das Bild streichen kann (der goldene Ring). enter image description here

Ich frage mich, wie sie das machen. Es ist offensichtlich Javascript, und ich habe mir die Seitenquelle angesehen, aber es ist nicht besonders lesbar (keine Überraschung).

18
John C

Betrachtet man ihren Quellcode, so scheint es, als würden sie ziemlich grundlegende Techniken einsetzen, um dies zu erreichen.

Alle eingebetteten animierten GIFs werden ignoriert. Grundsätzlich gibt es zwei Bilder - große und kleine Bilder der gesamten Szene. Das größere Bild wird dreimal im Dokument wiederholt. Sehen Sie sich das kommentierte Bild unten an, um eine bessere Vorstellung davon zu bekommen, wie der Zoom funktioniert. annotated zoom

Der Teil innerhalb des Vergrößerungskreises ist in drei Divs aufgeteilt - oben, mittig und unten. Der Überlauf für jedes Div sollte ausgeblendet sein. Jedes div ist relativ innerhalb des Zoomkreises positioniert. Ändern Sie bei der Mausbewegung die absolute Position des Zoomkreises in die Mauskoordinaten. Ihr Beispiel verwendet auch CSS3 für die Skalierung und das Hinzufügen einiger Animationsverzögerungen.

Hier ist eine Art minimal rekonstruiertes Beispiel .

Ein anderes Beispiel wo wir den Div-Überlauf nicht verstecken, um die gesamte Sache als Quadrat anzuzeigen.

16
Anurag

Nun, erstens gibt es für jeden, der einen solchen Effekt nutzen möchte, jede Menge jQuery-Plugins. Hier nur einige davon:

  1. Power Zoomer
  2. Profilbild Zoomer
  3. Cloud Zoom

Zweitens ist es ziemlich leicht zu erreichen. Laden Sie einfach das Bild in voller Größe, geben Sie ihm jedoch eine width, die kleiner als seine tatsächliche Breite ist, so dass es von CSS skaliert wird. Verwenden Sie anschließend JavaScript + CSS, um eine Div (die Lupe) mit demselben Bild als Hintergrund zu erstellen, ändern Sie jedoch die background-position-Eigenschaft in die entsprechende skalierte x,y-Koordinate, in der sich die Maus des Benutzers gerade befindet.

Es gibt andere Wege, wie ich vermute, und Google macht es vielleicht anders, aber das ist für mich der offensichtlichste Weg, der mir einfällt.

10
Herman Schaaf

Besuchen Sie http://codeblab.com/glass/ für ein reales Beispiel und eine ausführliche Erklärung dieser Technik. Flash und CSS v3 verfügen über umfangreiche Funktionen zum Erstellen einer runden Lupe. simulate-a-circle-with-overlapping-rectangles funktioniert jedoch auf (vielen) mehr Plattformen. 

(OFFENBARUNG: codeblab.com ist mein persönlicher Hobbyblog mit einigen schwachen Links zu meiner Arbeit in den Niederlanden.) 

6
Jan-Mark

Es gibt ein vollständiges Beispiel für die Vergrößerung jeder Art von HTML, einschließlich HTML5 unter http://www.aplweb.co.uk/blog/js/magnifying-glass/ . Funktioniert auch browserübergreifend - obwohl die abgerundeten Ecken bei den meisten Browsern etwas unangenehm sind - Sie müssen also eine Box anstelle eines Kreises verwenden.

So funktioniert's:

  1. Duplizieren Sie den Inhalt, den Sie vergrößern möchten
  2. Platzieren Sie den duplizierten Inhalt in einem anderen Element und setzen Sie die sichtbare Breite/Höhe und den Überlauf ausgeblendet
  3. Verwenden Sie JavaScript, um den duplizierten Inhalt so zu verschieben, dass er sich um die Zoombewegung * bewegt. Bewegen Sie das sichtbare Div auch durch die Mausbewegung.

Das ist so ziemlich es auch. Es gibt viele Kleinigkeiten, auf die man achten muss, damit er in allen Browsern funktioniert.

5
Andy

Ich weiß nicht, wie Google dies tut, da das Logo in meiner Umgebung nicht mehr angezeigt wird. Dieser Effekt kann jedoch erreicht werden, indem die vergrößerte animierte GIF-Datei mit der Leinwand über das normale Bild geschnitten wird. Alternativ können Sie auch einen kreisförmigen Ausschnitt erstellen, indem Sie den CSS-Rahmenradius verwenden (der häufig zur Implementierung abgerundeter Ecken verwendet wird). 

BEARBEITEN: Ich habe dies zusammen gehackt, um die grundlegende Technik zu zeigen, die Sie benötigen, wenn Sie CSS border-radius verwenden: http://jsfiddle.net/yjBuS/

4
Lie Ryan

Sieht so aus, als würden sie zwei Bilder verwenden, eines für das Logo und eines für das Zoomen (das gezoomte ist tatsächlich geschnitten, um die Animationen separat auszuführen ...?) Sie erkennen wahrscheinlich, ob sich der Mauszeiger über dem normalen Logo befindet, und zeigen dann den gelben Kreis und befestigen Sie ihn an der Mausposition. Zeigen Sie dann das andere Bild und verschieben Sie es gegenüber der Maus. Oder etwas ähnliches.

0
Ethan