js, um einen simulierten Einkaufszentrumsfall zu erreichen
|
Freunde, die HTML-, CSS- und JS-Frontend lernen, dieses Mal werde ich die Implementierung des Einkaufszentrum-Falls mit Ihnen teilen! Vorbereitungsphase:Bereiten Sie einige Bilder vor, die auf der Seite platziert werden müssen, kleine Bilder und die entsprechenden großen Bilder. Der Blogger verwendet kleine Bilder (40 x 40) und große Bilder (321 x 430) als Beispiele. Strukturanalyse:
Wirkungsanalyse:
Verwenden Sie CSS, um den Rahmen festzulegen:Legen Sie das Div-Tag fest (legen Sie die Rahmenattribute fest):
#showdiv{
Breite: 342px;
Höhe: 505px;
Rand: durchgezogen 1px;
Rahmenradius: 10px;
}Setzen Sie das Tabellen-Tag (es ist kein Rahmen erforderlich und es muss ein gewisser Abstand zum oberen Rand eingehalten werden):
#ta{
Rand: automatisch;
Rand oben: 5px;
}Verwenden Sie js, um die dynamischen Effekte der Seite festzulegen:Mauseingabefunktion:
Funktion operInImg(img,src){
//Bildstil festlegen img.style.border="solid 1px blue";
//Bildpfad des großen Bildes festlegen //Pfad des großen Bildes abrufen var big = document.getElementById("big");
//Pfad festlegen big.src=src;
}
Funktion operOutImg(img){
//Bildstil festlegen img.style.border="";
}Mouse-Out-Funktion:
Funktion operOutImg(img){
//Bildstil festlegen img.style.border="";
}Allgemeine Codeimplementierung:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<!--JS-Codedomäne deklarieren-->
<Skript>
//Erstellen Sie eine Funktion zum Verknüpfen und Stylen von Fotos function operInImg(img,src){
//Bildstil festlegen img.style.border="solid 1px blue";
//Bildpfad des großen Bildes festlegen //Pfad des großen Bildes abrufen var big = document.getElementById("big");
//Pfad festlegen big.src=src;
}
Funktion operOutImg(img){
//Bildstil festlegen img.style.border="";
}
</Skript>
<!---CSS-Codedomäne deklarieren-->
<Stil>
/*Div-Stil festlegen*/
#showdiv{
Breite: 342px;
Höhe: 505px;
Rand: durchgezogen 1px;
Rahmenradius: 10px;
}
/*Tabellenstil festlegen*/
#ta{
Rand: automatisch;
Rand oben: 5px;
}
</Stil>
<Titel>taobao</Titel>
</Kopf>
<Text>
<div id="div anzeigen">
<Tabelle Breite = "332px" Höhe = "440px" id="ta">
<tr Höhe="300px">
<td colspan="5"><img src="./images/demo-big.jpg" alt="" id="big"></td>
</tr>
<tr Höhe="40px">
<td><img src="./images/demo01.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big01.jpg')" onmouseout="operOutImg(this)"></td>
<td><img src="./images/demo02.jpg" alt="" onmouseover="operInImg(dieses,'./images/demo-big02.jpg')" onmouseout="operOutImg(dieses)"> </td>
<td><img src="./images/demo03.jpg" alt="" onmouseover="operInImg(dieses,'./images/demo-big03.jpg')" onmouseout="operOutImg(dieses)"> </td>
<td><img src="./images/demo04.jpg" alt="" onmouseover="operInImg(dieses,'./images/demo-big04.jpg')" onmouseout="operOutImg(dieses)"> </td>
<td><img src="./images/demo05.jpg" alt="" onmouseover="operInImg(dieses,'./images/demo-big05.jpg')" onmouseout="operOutImg(dieses)"> </td>
</tr>
</Tabelle>
</div>
</body>
</html>Ergebnis:
Vielen Dank fürs Lesen und gerne können Sie uns auf etwaige Mängel hinweisen! 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:
|
<<: Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.23
>>: So ändern Sie die Server-UUID in MySQL
Artikel empfehlen
Einführung in die Stapelverarbeitung von virtuellen Netzwerkkarten unter CentOS 7.6
1 Überprüfen Sie, ob der Kernel ein Tun-Modul hat...
Zusammenfassung der Probleme beim Hinzufügen, Löschen, Ändern und Abfragen von MySQL-Tabellen, -Spalten und -Datenbanken
Im Folgenden habe ich einige grundlegende SQL-Ken...
Beispielanalyse der Intervallberechnung von MySQL-Datum und -Uhrzeit
Dieser Artikel beschreibt anhand eines Beispiels ...
W3C Tutorial (5): W3C XML Aktivitäten
XML dient der Beschreibung, Speicherung, Übertrag...
Der Unterschied zwischen MySQL count(1), count(*) und count(field)
Inhaltsverzeichnis 1. Erster Blick auf COUNT 2. D...
MySQL-Code zur Implementierung der Sequenzfunktion
MySQL implementiert Sequenzfunktion 1. Erstellen ...
JS realisiert den automatischen Wiedergabeeffekt von Bildern
In diesem Artikel wird der spezifische Code von J...
Html+css, um reinen Text und Schaltflächen mit Symbolen zu erreichen
Dieser Artikel fasst die Implementierungsmethoden...
Beispiel für die Implementierung bidirektionaler Nachrichten zwischen übergeordneten und untergeordneten Seiten in einem HTML-Iframe
Eines Tages stellte der Leiter die Anforderung, e...
Tutorial zur Installation einer MySQL-ZIP-Datei
In diesem Artikel wird die spezifische Methode zu...
Docker verwendet Nextcloud, um eine private Baidu-Cloud-Festplatte zu erstellen
Plötzlich musste ich einen privaten Dienst für di...
Vue implementiert Upload-Komponente
Inhaltsverzeichnis 1. Einleitung 2. Ideen Zwei Mö...
Detaillierte Erläuterung der Nginx-Prozessverwaltungs- und Neuladeprinzipien
Prozessstrukturdiagramm Nginx ist eine Multiproze...
mysql8.0: Passwortänderung vergessen und Problem mit ungültigem Net-Befehlsdienstnamen
Geben Sie net start mysql in cmd ein und die Eing...
Grundlegende Ideen zum Auffinden von Fehlern in der Web-Frontend-Entwicklung
Die WEB-Entwicklung besteht hauptsächlich aus zwe...