[Résumé] 3 petites fonctions intéressantes que JavaScript peut implémenter

JavaScript est un langage de script largement utilisé dans le développement web front-end et dispose de riches ressources pour implémenter de petites fonctions. Cet article présentera plusieurs petites implémentations de fonctions intéressantes pour aider les lecteurs à mieux comprendre l'application de JavaScript.

1. Suiveur de la souris

Le suiveur de la souris est une petite fonction qui permet aux éléments de se déplacer lorsque la souris se déplace. Cet effet dynamique donne aux gens un sentiment d'interactivité et convient à la décoration de sites Web.

Méthode d'implémentation :

1. Définissez d'abord un élément dans le fichier HTML qui doit suivre le mouvement de la souris, comme une icône ou un texte.

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

2. Définissez le style de base en CSS et définissez la position de l'élément sur un positionnement fixe.

.follow {
   ...
   position: fixed;
}

3. Ajoutez des événements d'écoute de souris en JavaScript, changez la position de l'élément et faites-le bouger avec la position de la souris.

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

2. Carrousel d'images

Le carrousel d'images est un excellent effet interactif qui apparaît souvent sur les sites Web. Sa fonction est de basculer entre différents contenus d'affichage d'images. Basculez entre différentes images, ce qui donne un effet d'animation continu et fluide.

Méthode de mise en œuvre :

1. Définissez d'abord plusieurs images dans le fichier HTML en fonction des exigences de conception. Vous pouvez utiliser la balise img ou définir l'image d'arrière-plan en CSS.

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

2. Définissez le style de conteneur du carrousel d'images en CSS pour créer le cadre du carrousel.

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

3. Ajoutez un timer en JavaScript pour contrôler le carrousel d'images.

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

4. À l'intérieur du minuteur, utilisez l'attribut de transformation CSS pour obtenir l'effet d'animation de changement d'image.

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. Développer et réduire

Dans une page Web, nous devons souvent définir un masquage initial, et les utilisateurs peuvent cliquer pour développer les modules fonctionnels. La mise en œuvre de ce module fonctionnel peut être réalisée à l'aide de JavaScript et CSS.

Méthode d'implémentation :

1. Écrivez d'abord les modules qui doivent être développés et réduits dans le fichier HTML.

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

L'attribut style de l'élément de contenu est défini sur display sur none, ce qui signifie que l'élément est masqué dans l'état initial.

2. Définissez le style de base en CSS et ajoutez un écouteur d'événement pour l'événement de clic

.box .title {
   cursor: pointer;
}

3 Dans le fichier JavaScript, utilisez la méthode addEventListener pour écouter le clic. événement et juger par L'état de l'élément de contenu utilise l'attribut display de CSS pour changer la fonction d'expansion et de réduction.

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';
   }
});

Ce qui précède sont les méthodes d'implémentation de trois petites fonctions. Tant que nous maîtrisons bien la syntaxe de base de JavaScript et les fichiers de bibliothèque associés, nous pouvons obtenir de riches effets interactifs dans les pages Web. Les lecteurs peuvent essayer d'appliquer ces méthodes dans leurs projets pour améliorer leurs compétences en développement front-end.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!