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
Tutorial zum Konfigurieren und Ändern von Passwörtern für die kostenlose MySQL-Installationsversion
Schritt 1: Umgebungsvariablen konfigurieren (mein...
Detaillierte Erklärung zum Kopieren und Sichern von Docker-Containerdaten
Hier nehmen wir den Jenkins-Container als Beispie...
Vue implementiert QR-Code-Scanfunktion (mit Stil)
brauchen: Verwenden Sie Vue, um das Scannen von Q...
Beispielcode zur einfachen Implementierung des Seitenlayouts mit Flex-Layout
Kommen wir ohne weitere Umschweife direkt zum Cod...
Vier Möglichkeiten zum Erstellen von Objekten in JS
Inhaltsverzeichnis 1. Objekte durch Literalwert e...
Attribute im Vue V-For-Loop-Objekt
Inhaltsverzeichnis 1. Werte innerhalb von Schleif...
Der Datenordner konnte während der Installation von mysql8.0.14.zip nicht automatisch erstellt werden. Der Dienst kann nicht gestartet werden.
Nachdem ich das System heute neu installiert hatt...
So implementieren Sie Zeilenumbrüche im Texteingabebereich von Textarea
Wenn Sie den Text im Textarea-Eingabebereich umbre...
Führen Sie die Schritte zur Verwendung des Elements in vue3.0 aus
Vorwort: Verwenden Sie das Element-Framework in v...
Lösung für das Problem des Datenverlusts bei Verwendung der Ersetzungsoperation in MySQL
Vorwort Die Entwickler des Unternehmens verwendet...
Docker-Installation von MySQL (8 und 5.7)
In diesem Artikel wird die Verwendung von Docker ...
CSS zum Erzielen eines dynamischen Schaltflächeneffekts mit Partikeln
Ursprünglicher Link https://github.com/XboxYan/no...
Beispiel für die Anzeige eines Standardbilds, wenn in HTML kein Bild vorhanden ist
Ein Bildlink <img src="" /> Ich m...
Konfiguration virtueller Domänennamen und Testüberprüfung in einer Linux\Nginx-Umgebung
Durch die Verwendung der virtuellen Domänennamenk...
Design-Sharing der Download-Seite des Pengyou.com-Mobilclients (Bild und Text)
Schauen wir uns zunächst einige einfache Daten an:...