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
WeChat-Miniprogramm zur Implementierung elektronischer Signaturen
In diesem Artikel finden Sie den spezifischen Cod...
Lösen Sie das Problem, dass beim Ausführen von Docker zwei Ports gestartet werden, die unterschiedliche Ports belegen
Problembeschreibung: Nach der Ausführung von dock...
Vorteile von MySQL-Abdeckungsindizes
Ein allgemeiner Vorschlag besteht darin, Indizes ...
So stellen Sie K8s in Docker bereit
K8s k8s ist ein Cluster. Es gibt mehrere Namespac...
Sollte ich für das mobile Web-WAP Bootstrap oder jQuery Mobile verwenden?
Lösung des Problems Bootstrap ist ein CSS-Framewo...
Die grundlegende HTML-Syntax ist praktisch für diejenigen, die gerade erst anfangen, HTML zu lernen
1.1 Allgemeine Kennzeichnung Ein allgemeines Tag ...
Verwenden Sie .Htaccess, um böswillige IP-Angriffe auf Websites zu verhindern, den Zugriff auf bestimmte Domänennamen zu untersagen, Maschinencrawler zu untersagen und Hotlinking zu untersagen
Vor einigen Tagen habe ich festgestellt, dass mei...
Die vollständigen und inkrementellen Daten einer bestimmten MySQL-Tabelle mit der Nachrichtenwarteschlange synchronisieren - Lösung
Inhaltsverzeichnis 1. Ursprüngliche Nachfrage 2. ...
Mehrere Möglichkeiten zum Einfügen von SVG in HTML-Seiten
SVG (Scalable Vector Graphics) ist ein Bildformat...
Detaillierte Erläuterung zur Lösung des Konflikts von Projekt-URLs, der durch das Festlegen des Standardpfads von Tomcat verursacht wird
Vorwort Tomcat ist ein hervorragender Java-Contai...
JavaScript zum Erzielen eines Zeitbereichseffekts
In diesem Artikel wird der spezifische Code für J...
Installationsmethode für komprimierte MySQL 5.6-Pakete
Es gibt zwei Installationsmethoden für MySQL: MSI...
JavaScript zur Implementierung der Funktion zum Ändern des Avatars
In diesem Artikel wird der spezifische JavaScript...
So leiten Sie über den Nginx-Lastausgleich zu https um
Kopieren Sie das Zertifikat und den Schlüssel im ...
Tutorial zur Installation, Bereitstellung und Verwaltung von KVM-Virtualisierung
Inhaltsverzeichnis 1.kvm-Bereitstellung 1.1 KVM-I...