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
Vue implementiert rekursiv ein dreistufiges Menü
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erläuterung der Methoden zur Überprüfung und Verwaltung von MySQL-Benutzerrechten
Dieser Artikel veranschaulicht anhand von Beispie...
Beheben Sie das Problem der Kennwortänderung bei der ersten Anmeldung nach der Installation von MySQL 8.0
Hier finden Sie eine Einführung zum Ändern des Pa...
Detaillierte Erklärung, wie Sie den Speicherort der Nginx-Konfigurationsdatei finden
Wie lässt sich bei einem unbekannten Server oder ...
Bringen Sie Ihnen bei, wie Sie ein React+Antd-Projekt von Grund auf erstellen
Bei den vorherigen Artikeln handelte es sich um m...
Details zum MySQL-Index-Pushdown
Inhaltsverzeichnis 1. Prinzip des ganz linken Prä...
Einführung in grundlegende HTML-Steuerelemente_PowerNode Java Academy
Das <input>-Tag Das <input>-Tag wird ...
So wählen Sie die Transaktionsisolationsebene in einem MySQL-Projekt
Einführung Beginnen wir mit unserem Inhalt. Ich g...
Detaillierte Erklärung der schmerzlosen Token-Aktualisierungsmethode von Uniapp
Wenn das Front-End die Schnittstelle anfordert, w...
Der gesamte Prozess der Konfiguration von Hive-Metadaten für MySQL
Gehen Sie im Hive-Installationsverzeichnis in das...
Grafisches Tutorial zur Installation von MySQL 8.0.12
MySQL8.0.12-Installationstutorial, mit allen teil...
CSS-Beispielcode zum Zeichnen eines Lutschers
Hintergrund: Machen Sie jeden Tag ein wenig Forts...
Virtueller vsftpd-Benutzer basierend auf MySql-Authentifizierung
Inhaltsverzeichnis 1. MySQL-Installation 1.2 Tabe...
So betten Sie Dateien im Flash-Videoformat (FLV, SWF) in HTML-Dateien ein
Flash-Dateiformate: .FLV und .SWF Für das Flash-Vi...
Mysql Master-Slave-Synchronisation Last_IO_Errno:1236 Fehlerlösung
Was ist der Grund für den Fehler Last_IO_Errno:12...