Der Effekt des Heranzoomens in einem Taobao-Shop ähnelt dem Prinzip einer Diashow.
|
Heute habe ich den Mauszoom-Effekt auf der Vorderseite von Taobao kennengelernt, der dem Prinzip der Verwendung von Folien ähnelt. Ich werde diesen Code hier analysieren. Code kopieren Der Code lautet wie folgt:<div Klasse="sub all_t1" Stil="Breite:160px;Höhe:107px;Hintergrund:URL(upload/2022/web/T2khnoXihaXXXXXXXX_!!845309971.png_160x160.jpg) keine Wiederholung;"> <div data-widget-config="{'trigger':'.all_t1','align':{'node':'.all_t1','offset':[0,-160],'points':['bc','tc']}}" data-widget-type="Popup" class="J_TWidget versteckt"> <div style="width:310px;height:207px;background:url(upload/2022/web/T2khnoXihaXXXXXXXX_!!845309971.png_310x310.jpg) keine Wiederholung"></div> </div> </div> class="J_TWidget hidden" ist der Schlüssel zum integrierten JS-Code von Taobao zur Steuerung von Bildattributen. Er wird verwendet, um den Knoten des Div abzurufen und den Knoten zu steuern. Was den Stil betrifft, ist es die Definition des Stils, einschließlich Länge, Breite, Hintergrundbild <div data-widget-config="{'trigger':'.all_t1','align':{'node':'.all_t1','offset':[0,-160],'points':['bc','tc']}}" data-widget-type="Popup" class="J_TWidget hidden"> Dies ist zweifellos die Definition der Eigenschaften der Spezialeffekte. Knoten: „benutzerdefiniert“, // Referenzelement. Die Positionierung des Popups erfolgt relativ zum Referenzelement. Genau wie das Schreiben von Kontakten, Unterstützt das Schreiben von Klassen- und ID-Selektoren Punkte: [tr,tl], // ['tl', 'tr'] bedeutet, dass das tl des Popups mit dem tr des Referenzknotens ausgerichtet ist. Die spezifische Bedeutung und den Wert von tl und tr finden Sie im Screenshot unten. t (oben), c (Mitte), b (unten), l (links), r (rechts) Offset: [0,0] // Gültiger Wert ist [n, m], nachdem die Punkte ausgerichtet sind, Offset-Wert, Im Allgemeinen kann es zur Feinabstimmung verwendet werden. n und m stellen die Ausrichtung zweier Punkte dar. Der Versatz zwischen den x- und y-Koordinaten |
>>: Virtueller vsftpd-Benutzer basierend auf MySql-Authentifizierung
Artikel empfehlen
Lösen Sie das Problem des Startfehlers von PHPStudy MySQL unter Windows
Einen Fehler melden Der Apache\Nginx-Dienst wurde...
Detaillierte Erklärung der MySQL-Sperren (Tabellensperren, Zeilensperren, gemeinsame Sperren, exklusive Sperren, Lückensperren)
Im wirklichen Leben ist ein Schloss ein Werkzeug,...
Eine einfache Methode, um mit der Mindestbreite und Mindesthöhe von IE6 kompatibel zu sein
Wenn eine Website im Breitbildformat ist, ziehen ...
MySQL-Datenbank Daten laden, vielfältige Verwendungsmöglichkeiten
Inhaltsverzeichnis Vielfältige Einsatzmöglichkeit...
Docker exec führt mehrere Befehle aus
Der Befehl „Docker Exec“ kann Befehle in einem la...
So bereinigen Sie den MySQL-Speicherplatz in der Alibaba Cloud
Heute habe ich von Alibaba Cloud eine Festplatten...
Detailliertes Tutorial zum Ausführen mehrerer Springboot mit Docker
Docker führt mehrere Springboot Erstens: Port-Map...
Eine kurze Diskussion über die Unterschiede zwischen den drei wichtigsten Datenbanken: Mysql, SqlServer und Oracle
MySQL Vorteil: Kleine Größe, hohe Geschwindigkeit...
Mehrere beliebte Website-Navigationsrichtungen in der Zukunft
<br />Dies ist nicht nur ein Zeitalter der I...
Tutorial zum Kompilieren und Installieren von MySQL 5.7.17 aus dem Quellcode auf dem Mac
1. Herunterladen und entpacken nach: /Users/xiech...
Vue - benutzerdefinierte gekapselte Schaltflächenkomponente
Der benutzerdefinierte Kapselungscode der Vue-But...
Vollständige Schritte zum Implementieren des Standort-Punch-Ins mithilfe räumlicher MySQL-Funktionen
Vorwort Die Projektanforderung besteht darin, fes...
Tutorial zur MySQL-Installation in der Linux-CentOS7-Umgebung
Detaillierte Einführung in die Schritte zur Insta...
So führen Sie in MySQL eine Abfrage-Zwischenspeicherung durch und beheben Fehler
Wir alle wissen, dass wir die Eigenschaften der P...
Analyse der Nutzungsszenarien und Konfigurationsmethoden von Nginx Rewrite
Nginx Rewrite-Nutzungsszenarien 1. Sprung der URL...