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
Eine ausführliche Einführung in React-Referenzen
1. Was ist Refs wird in Computern als Resilient F...
CSS3 realisiert den leuchtenden Randeffekt
Wirkung der Operation: html <!-- Dieses Elemen...
Detaillierte Erklärung der schmerzlosen Token-Aktualisierungsmethode von Uniapp
Wenn das Front-End die Schnittstelle anfordert, w...
So installieren Sie Element UI und verwenden Vektorgrafiken in vue3.0
Hier konzentrieren wir uns nur auf die Installati...
JS Leicht verständliche Funktion und Konstruktor
Inhaltsverzeichnis 1. Übersicht 1.1 Erstellen ein...
Müssen Designer das Programmieren lernen?
Oftmals wird nach der Fertigstellung eines Webdes...
Anwendung der dynamischen Bildladetechnologie und Anwendungsfall des Plug-Ins jquery.lazyload
Anwendungsbeispiel-Website http://www.uhuigou.net ...
Detaillierte Erklärung der Text-Fill-Color-Eigenschaft in CSS3
Was bedeutet Textfüllfarbe? Rein wörtlich bedeute...
Grafisches Tutorial zu MySQL-Downloads und Installationsdetails
1. Um die MySQL-Datenbank herunterzuladen, besuch...
Routing-Wiederverwendungsfunktion für mehrere Tabs der Ant Design Blazor-Komponentenbibliothek
In letzter Zeit besteht eine wachsende Nachfrage ...
Beispiele für die Verwendung der oder-Anweisung in MySQL
1. Die Verwendung der oder Syntax in MySQL und di...
JS implementiert das Auf- und Abgleiten auf dem mobilen Endgerät, jeweils einen Bildschirm nach dem anderen
In diesem Artikel erfahren Sie den spezifischen J...
Detailliertes Tutorial zur Installation von SonarQube mit Docker
Inhaltsverzeichnis 1. Ziehen Sie das Bild 1.1 Zie...
Eigenschaften von JavaScript-Pfeilfunktionen und Unterschiede zu normalen Funktionen
Inhaltsverzeichnis 1. Verwendung von Pfeilfunktio...
Verwenden Sie natives JS, um den Scroll-Effekt des Live-Bullet-Bildschirms zu simulieren
Inhaltsverzeichnis 1. Grundprinzipien 2. Spezifis...