[Zusammenfassung] 3 interessante kleine Funktionen, die JavaScript implementieren kann

JavaScript ist eine Skriptsprache, die häufig in der Web-Frontend-Entwicklung verwendet wird und über umfangreiche Ressourcen für die Implementierung kleiner Funktionen verfügt. In diesem Artikel werden mehrere interessante Implementierungen kleiner Funktionen vorgestellt, um den Lesern ein besseres Verständnis der Anwendung von JavaScript zu erleichtern.

1. Mausfolger

Der Mausfolger ist eine kleine Funktion, die es ermöglicht, Elemente mit der Maus zu bewegen. Dieser dynamische Effekt vermittelt den Menschen ein interaktives Gefühl und eignet sich für die Website-Dekoration.

Implementierungsmethode:

1 Definieren Sie zunächst ein Element in der HTML-Datei, das der Mausbewegung folgen muss, beispielsweise ein Symbol oder einen Text.

<div class="follow"></div>

2. Legen Sie den Grundstil in CSS fest und stellen Sie die Position des Elements auf feste Positionierung ein.

.follow {
   ...
   position: fixed;
}

3. Fügen Sie Maus-Listening-Ereignisse in JavaScript hinzu, ändern Sie die Position des Elements und bewegen Sie es mit der Mausposition.

document.addEventListener('mousemove', (event) => {
  const followItem = document.querySelector('.follow');
  followItem.style.left = event.clientX + 'px';
  followItem.style.top = event.clientY + 'px';
})

2. Bilderkarussell

Bilderkarussell ist ein hervorragender interaktiver Effekt, der häufig auf Websites erscheint. Seine Funktion besteht darin, zwischen verschiedenen Bildanzeigeinhalten zu wechseln. Wechseln Sie zwischen verschiedenen Bildern, was zu einem kontinuierlichen und flüssigen Animationseffekt führt.

Implementierungsmethode:

1 Definieren Sie zunächst mehrere Bilder in der HTML-Datei entsprechend den Designanforderungen. Sie können das img-Tag verwenden oder das Hintergrundbild in CSS festlegen.

<div class="slider">
    <img src="./img/1.jpg" />
    <img src="./img/2.jpg" />
    <img src="./img/3.jpg" />
</div>

2. Legen Sie den Containerstil des Bildkarussells in CSS fest, um den Karussellrahmen zu erstellen.

.slider {
   width: 100%;
   height: 500px;
   overflow: hidden;
  position: relative;
}

3. Fügen Sie einen Timer in JavaScript hinzu, um das Bildkarussell zu steuern.

setInterval(() => {
   // 定时器要做的事情
}, 2000); // 每2秒执行一次

4. Verwenden Sie im Timer das CSS-Transformationsattribut, um den Bildwechsel-Animationseffekt zu erzielen.

let index = 0; // 初始值为0
const slider = document.querySelector('.slider');
const imgs = slider.children; // 获取容器内所有img元素
setInterval(() => {
   index++;
   if(index === imgs.length) {
      index = 0;
   }
   const showImg = imgs[index];
   showImg.classList.add('show');
   ... // 隐藏其他图片
}, 2000);

3. Erweitern und reduzieren

Auf einer Webseite müssen wir häufig einige anfängliche Ausblendungen festlegen, und Benutzer können auf die erweiterten Funktionsmodule klicken. Die Implementierung dieses Funktionsmoduls kann mithilfe von JavaScript und CSS erfolgen.

Implementierungsmethode:

1 Schreiben Sie zunächst die Module, die erweitert und reduziert werden müssen, in die HTML-Datei.

<div class="box">
   <div class="title">更多</div>
   <div class="content" style="display: none">
      ...
   </div>
</div>

Das Style-Attribut des Inhaltselements ist auf display auf none gesetzt, was bedeutet, dass das Element im Ausgangszustand ausgeblendet ist.

2. Legen Sie den Grundstil in CSS fest und fügen Sie einen Ereignis-Listener für das Klickereignis hinzu.

.box .title {
   cursor: pointer;
}

3. Verwenden Sie in der JavaScript-Datei die Methode addEventListener, um auf den Klick zu warten Ereignis und Beurteilung nach Der Zustand des Inhaltselements verwendet das Anzeigeattribut von CSS, um die Funktion zum Erweitern und Reduzieren umzuschalten.

const box = document.querySelector('.box');
box.addEventListener('click', () => {
   const content = box.querySelector('.content');
   if(content.style.display === 'none') {
      content.style.display = 'block';
   } else {
      content.style.display = 'none';
   }
});

Die oben genannten sind die Implementierungsmethoden von drei kleinen Funktionen. Solange wir die grundlegende Syntax von JavaScript und zugehörigen Bibliotheksdateien gut verwenden, können wir umfangreiche interaktive Effekte auf Webseiten erzielen. Leser können versuchen, diese Methoden in ihren Projekten anzuwenden, um ihre Front-End-Entwicklungsfähigkeiten zu verbessern.

Das obige ist der detaillierte Inhalt von[Zusammenfassung] 3 interessante kleine Funktionen, die JavaScript implementieren kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!