JavaScript zum Erzielen eines Taobao-Produktbild-Umschalteffekts
|
JavaScript-Umschalteffekt für Bekleidungsalben (ähnlich wie beim Umschalten von Taobao-Produktbildern). Zu Ihrer Information: Der spezifische Inhalt ist wie folgt Kommen wir ohne weitere Umschweife direkt zum Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<style type="text/css">
#großesBild{
Breite: 200px;
}
*{
Polsterung: 0;
Rand: 0;
}
ul{
Listenstil: keiner;
/*Überlauf: versteckt;*/
}
ul li{
schweben: links;
Breite: 46px;
Höhe: 46px;
Rand links: 10px;
Rand oben: 20px;
Rand: 2px durchgezogen #ffffff;
}
ul .aktiv{
Rahmenfarbe: rot;
}
</Stil>
</Kopf>
<Text>
<img src="img/cloth_01.jpg" id="bigImg">
<ul>
<li Klasse="aktiv">
<a href="">
<img src="img/cloth_01.jpg" width=46 class="smallImg">
</a>
</li>
<li>
<a href="">
<img src="img/cloth_02.jpg" width=46 class="smallImg">
</a>
</li>
<li>
<a href="">
<img src="img/cloth_03.jpg" width=46 class="smallImg">
</a>
</li>
<li>
<a href="">
<img src="img/cloth_04.jpg" width=46 class="smallImg">
</a>
</li>
<li>
<a href="">
<img src="img/cloth_05.jpg" width=46 class="smallImg">
</a>
</li>
</ul>
<!--JS-Teil-->
<Skripttyp="text/javascript">
// 1. Holen Sie sich die Ereignisquelle var bigImg = document.getElementById("bigImg");
var smallImgs = document.getElementsByClassName("smallImg");
für (var i=0;i<smallImgs.length;i++){
// 2. Durchlaufe die Sammlung und füge jedem img-Tag ein Ereignis hinzu smallImgs[i].onmouseover = function (){
// 3. Ereignishandler // 3.1 Bevor Sie mit der Maus über jedes li-Tag fahren, setzen Sie die Klassennamen aller li-Tags auf leere Werte für (var j=0;j<smallImgs.length;j++){
smallImgs[j].parentNode.parentNode.setAttribute("Klasse","");
}
// 3.2 Ändern Sie den src-Attributwert des großen Bildes var smallImgSrc = this.getAttribute("src");
bigImg.setAttribute("src",smallImgSrc);
// 3.3 Fügen Sie dem übergeordneten Tag des img-Tags, über dem die Maus schwebt, eine Klasse hinzu: this.parentNode.parentNode.setAttribute("class","active");
}
}
</Skript>
</body>
</html>Implementierungs-Effekt-Diagramm:
Standardmäßig ist das erste Bild ausgewählt (das große Bild ist standardmäßig das erste). Wenn die Maus über das entsprechende Bild fährt, wechselt das große Bild zu diesem Bild. Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
>>: So verwenden Sie Docker Compose zum Implementieren des Nginx-Lastausgleichs
Artikel empfehlen
Detaillierte Erklärung der Rahmen- und Regelattribute der Tabelle in HTML
Die Rahmen- und Regelattribute des Tabellentags k...
So fügen Sie einer großen MySQL-Tabelle eine Spalte hinzu
Die Frage wird hier zitiert: https://www.zhihu.co...
Detaillierte Erklärung der grundlegenden Verwendung des SSH-Befehls ssh-keygen
Die SSH-Public-Key-Authentifizierung ist eine der...
Lösen Sie das Hierarchieproblem des Z-Index des untergeordneten Elements und der Geschwisterknoten des übergeordneten Elements in CSS
1. Die Entstehung des Problems Habe eine flache L...
Zusammenfassung der Linux Logical Volume Management (LVM)-Nutzung
Die Verwaltung des Speicherplatzes ist für System...
【Webdesign】Teilen Sie E-WebTemplates exquisite Vorlagen für ausländische Webseiten (FLASH + PSD-Quelldatei + HTML).
Es handelt sich dabei ausschließlich um Webseiten...
Detaillierte Erklärung der JQuery-Datagrid-Abfrage
Inhaltsverzeichnis Fügen Sie dem Tree-Element Cod...
Tutorial zu HTML-Tabellen-Tags (21): Zeilenrahmen-Farbattribut BORDERCOLOR
Um die Tabelle zu verschönern, können Sie für die...
js canvas realisiert kreisförmige Wasseranimation
In diesem Artikelbeispiel wird der spezifische Co...
Komprimierungs- und Optimierungsvorgänge für Docker-Images
Der Grund für die heutige Beliebtheit von Docker ...
JavaScript Canvas implementiert Grafiken und Text mit Schatten
Verwenden Sie Canvas, um Grafiken und Text mit Sc...
Sprechen Sie über implizite Konvertierung in MySQL
Im Laufe der Arbeit werden Sie auf viele Fälle im...
CSS, um horizontale Linien auf beiden Seiten des mittleren Textes zu erreichen
1. Die Eigenschaft „vertical-align“ erzielt folge...
Methoden und Schritte für die verteilte Bereitstellung von Etcd basierend auf Docker
1. Umweltvorbereitung 1.1 Grundlegende Umgebung N...
Analyse zur Lösung des Problems, dass Navicat Premium eine Verbindung zu MySQL 8.0 herstellt und den Fehler „1251“ meldet.
Wenn Menschen zu lange untätig waren, denken sie,...