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
Detailliertes Tutorial zur Installation von MySQL 5.7.18 unter Linux (CentOS 7) mit YUM
Das Projekt muss MySQL verwenden. Da ich es zuvor...
Soll die Like-Funktion MySQL oder Redis verwenden?
Inhaltsverzeichnis 1. Häufige Fehler von Anfänger...
Springboot integriert die Docker-Bereitstellung, um zwei Möglichkeiten zum Erstellen von Docker-Images zu implementieren
Docker ist eine Open-Source-Engine, mit der sich ...
Tomcat verwendet Log4j zur Ausgabe des catalina.out-Protokolls
Das Standardprotokoll von Tomcat verwendet java.u...
So setzen Sie das Zabbix-Passwort zurück (ein Schritt)
Problembeschreibung Da wir uns nicht lange bei Za...
Einfaches Grafik-Tutorial zur Verwendung von Adobe Brackets
Adobe Brackets ist eine Open Source-, einfache un...
Detaillierte Erklärung der Ansichtszusammenfassungsdefinition im Angular-Framework
Vorwort Als Front-End-Framework, das „für große F...
Analyse der MySQL-Methode zur Implementierung des Fuzzy-String-Ersatzes basierend auf regulären Ausdrücken
In diesem Artikel wird anhand eines Beispiels bes...
Lösung für das Ausgehen der Auto-Increment-ID (Primärschlüssel) von MySQL
In MySQL werden viele Typen von Auto-Increment-ID...
Tools zum Konvertieren statischer Websites in RSS
<br /> Dieser Artikel wurde von Rachel Golds...
Erläuterung des MySQL-Abfragebeispiels anhand instanziierter Objektparameter
Dieser Artikel stellt vor, wie Sie durch Instanzi...
Vertieftes Verständnis des Implementierungsprinzips des Require Loader
Vorwort Wir sagen oft, dass Node keine neue Progr...
Docker erstellt CMS-On-Demand-System mit Player-Funktion
Inhaltsverzeichnis Text 1. Maschine vorbereiten 2...
Beispielcode zur Implementierung mobiler Expansions- und Collapse-Effekte mit reinem CSS3
Dieser Artikel stellt den Beispielcode zur Implem...
Wichtige Punkte zum Schreiben von Inhalten für META-Tags in HTML-Webseiten
Das META-Tag ist ein Hilfstag im Kopfbereich der ...