![Web Scraper Python & Selenium | Automatisiert Daten auslesen einer E-Commerce Seite + Excel [GERMAN]](https://i.ytimg.com/vi/AhTPbrlzyXw/hqdefault.jpg)
Inhalt
Um den Besuchern Ihrer Website die Möglichkeit zu geben, ein Bild im Detail zu betrachten, müssen Sie diese Bilder ein wenig manipulieren. Wenn Sie der Komposition ein wenig CSS, JavaScript und jQuery hinzufügen, können Sie den Effekt einer Lupe erzeugen, wenn sich der Mauszeiger über einem Bild auf Ihrer Seite bewegt. Dieser Effekt wird erreicht, indem ein kleines Fenster erstellt wird, in dem das Hintergrundbild angezeigt wird, wenn der Mauszeiger über das im Vordergrund angezeigte Bild bewegt wird.
Anweisungen
-
Fügen Sie JavaScript und jQuery mit den Anweisungen im Abschnitt "head" des HTML-Codes ein:
In diesem Beispiel befindet sich die jQuery-Bibliothek im Standard-HTML-Verzeichnis.
-
Fügen Sie ein CDATA-Tag ein, um zu verhindern, dass Browser versucht, jQuery-Operatoren zu analysieren:
-
Legen Sie die Höhen- und Breitenvariablen für die Anzeige der Bilder fest:
var W = 743; var H = 1155; var w = 192; var h = 300;
-
Stellen Sie die Bedingungen ein, unter denen die Vergrößerungsfunktion gestartet wird. Wenn diese Funktion aufgerufen wird, ersetzt sie den Mauszeiger durch einen kreisförmigen Betrachter des größten abgedeckten Bildes, wenn der Benutzer den Mauszeiger über das kleinere Bild bewegt, das auf der Seite angezeigt wird. Erstellen Sie diese Instanz mit dem Code:
$ (Dokument) .ready (Funktion () {
$ ("# myimage"). Mouseover (Funktion (e) {$ (document) .mousemove (myMM); $ ("# glass"). fadeIn ('fast');
});
-
Stellen Sie die Vergrößerungsfunktion und die Finalisierungsparameter ein. In diesem Beispiel wird das verborgene Bild um das Doppelte der Größe des kleineren Bildes vergrößert. Das Vergrößerungsfenster wird ausgeblendet, wenn der Mauszeiger außerhalb der Grenzen des kleineren Bildes angezeigt wird. Sie können dies mit dem Code tun:
function myMM (e) {var myImage = $ ("# myimage"); var glassImage = $ ("# glass-image"); var glass = $ ("# glass"); var xs = e.pageX - myImage.offset (). left; var ys = e.pageY - meinBild.offset (). top; var bx = glassImage.width () / 2 - xsW / W; var by = glassImage.height () / 2 - ysH / h; glass.css ("left", e.pageX-75-89 + "px"). css ("top", e.pageY-75-10 + "px"); glassImage.css ("Hintergrundposition", Bx + "px" + by + "px"); if (bx <-W || um <-H || bx> 150 || von> 150) {myImage.unbind ('mousemove', myMM); glass.fadeOut ('fast'); }}
-
Schließen Sie das jQuery-Skript und löschen Sie den CDATA-Parser mit den Anweisungen:
// ]]>
-
Legen Sie das Seitenlayout mit CSS fest, um das größere Hintergrundbild zu positionieren und die Grenzen des Vergrößerungsfensters mit dem Code zu positionieren:
type = "text / css"> #monaimage {margin-left: 200px; } #glass {Hintergrundwiederholung: keine Wiederholung; Hintergrundposition: oben links; Breite: 250px; Höhe: 170px; Polsterauflage: 10px; Polsterung links: 89px; Marge: 0; Position: absolut; Anzeige: keine; } # glass-image {Hintergrundbild: URL ('myImageLarge.jpg'); Breite: 150px; Höhe: 150px; Grenzradius: 75px; -moz-border-radius: 75px; Hintergrundwiederholung: keine Wiederholung; Hintergrundfarbe: #fff; Marge: 0; Polsterung: 0; Cursor: keine; } -
Schreiben Sie den HTML-Code, um die Seite im Abschnitt "Hauptteil" anzuzeigen:
>
Bewegen Sie die Maus über das Bild
Wie
- Dieser Code hängt von CSS3 ab, um ein rundes Vergrößerungsfeld zu erstellen, und funktioniert möglicherweise nicht in älteren Browsern. Legen Sie für die Abwärtskompatibilität mit älteren CSS-Implementierungen ein rechteckiges Feld für "# glass-image" (Lupe) fest.
Hinweis
- Ohne die CDATA-Tags versuchen Browser, Operatoren, die kleiner als "<" und größer als ">" sind, als HTML-Tags zu analysieren. Beziehen Sie immer die JavaScript- und jQuery-Operatoren in die CDATA-Tags ein, um "Skript" -Fehler zu vermeiden.