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:

Großer Bildbereich
Miniaturbildbereich
Gesamtgrenzbereich

Wirkungsanalyse:

Wenn Sie mit der Maus über das kleine Bild fahren, wird das große Bild entsprechend angezeigt.
Ein Platzieren der Maus auf dem kleinen Bild bewirkt einen entsprechenden Effekt.
Beim Herausbewegen der Maus verschwindet der entsprechende Effekt der kleinen Umrandung.

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:

js imitiert die Spezialeffekte des Bildkarussells der offiziellen Xiaomi-Website
JavaScript imitiert Xiaomi-Karusselleffekt
Beispiel für einen Produkt-Countdown in einem Einkaufszentrum basierend auf Javascript
JavaScript simuliert das Einkaufszentrum, um den Beispielcode des Bildwerbekarussells zu implementieren
JavaScript imitiert den vollständigen Seitenimplementierungsprozess der offiziellen Website von Xiaomi Mall

<<: Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.23

>>: So ändern Sie die Server-UUID in MySQL

Apache Log4j2 meldet eine Sicherheitslücke auf Nuklearebene und eine schnelle Lösung

Artikel

CSS erzielt den Effekt, dass die äußerste Schicht einer mehrschichtigen verschachtelten Struktur rotiert, während die anderen Schichten unverändert bleiben.

Artikel

Eine sehr detaillierte Zusammenfassung der Kommunikation zwischen Vue-Komponenten

js, um einen simulierten Einkaufszentrumsfall zu erreichen

Vorbereitungsphase:

Strukturanalyse:

Wirkungsanalyse:

Verwenden Sie CSS, um den Rahmen festzulegen:

Verwenden Sie js, um die dynamischen Effekte der Seite festzulegen:

Allgemeine Codeimplementierung:

Apache Log4j2 meldet eine Sicherheitslücke auf Nuklearebene und eine schnelle Lösung

CSS erzielt den Effekt, dass die äußerste Schicht einer mehrschichtigen verschachtelten Struktur rotiert, während die anderen Schichten unverändert bleiben.

Eine sehr detaillierte Zusammenfassung der Kommunikation zwischen Vue-Komponenten

Implementierungscode zum Betreiben einer MySQL-Datenbank in Golang

Detaillierte Erläuterung der Methode zur Bestimmung des einzelnen Masterknotens von MySQL 5.7 MGR

Beschreiben Sie kurz die Verwendung und Beschreibung des MySQL-Primärschlüssels und des Fremdschlüssels

Abfrage der Daten des Tages vor dem aktuellen Zeitintervall in MySQL

Grafisches Tutorial (Fenster) zur Installation und Konfiguration von MySQL 5.7.21

Natives JS zum Erzielen von Jalousie-Spezialeffekten

Implementierung der One-Click-TLS-Verschlüsselung für die Docker-Remote-API

Artikel empfehlen

MySQL Master-Slave-Synchronisationsmechanismus und Tracking-Prozess für Synchronisationsverzögerungsprobleme

Detaillierte Erklärung der Slots in Vue

HTML+CSS zur Implementierung des Beispielcodes des Dropdown-Menüs der Navigationsleiste

Fügen Sie dem Debian-Docker-Container geplante Crontab-Aufgaben hinzu

JavaScript BOM erklärt

Detaillierte Erläuterung des Prinzips und der Praxis der MySQL-Master-Slave-Replikation

Zusammenfassung der Methoden zur Verbesserung der MySQL-Anzahl

Designreferenz Schönes und originelles Blog-Design

Detaillierte Erläuterung des Beispielcodes für das elastische CSS3 Flex-Layout

MySQL-Installationsinformationen unter Linux-Server anzeigen

Detaillierte Codebeispiele zu sieben Methoden zur vertikalen Zentrierung mit CSS

Tutorial zur Installation von Ceph Distributed Storage mit Yum unter Centos7

Detaillierter Code zum Hinzufügen von Electron zum Vue-Projekt

Detaillierter Prozess zum Upgrade von gcc (Version 10.2.0) in der CentOS7-Umgebung

Vue implementiert die Abfrage von Startzeit und Endzeitbereich