htnm5 utilise javascript pour faire flotter la souris sur l'icône

Dans la conception Web, les icônes font souvent partie intégrante de la page. Cependant, comment rendre ces icônes plus vivantes et améliorer l’interactivité et l’attractivité de la page est devenu une question très importante. L'utilisation de JavaScript pour obtenir l'effet du passage de la souris sur les icônes peut exactement répondre à cette demande et apporter une nouvelle expérience visuelle à la conception Web.

1. Principe de mise en œuvre

Lorsque vous utilisez JavaScript pour obtenir l'effet de la souris passant à travers l'icône flottante, nous devons modifier le style CSS pour y parvenir. Plus précisément, nous devons définir la propriété position de l'icône sur "absolue" afin qu'elle puisse se déplacer librement dans le conteneur d'image. Ensuite, nous devons également définir la largeur et la hauteur du conteneur d'icônes et de l'icône elle-même afin qu'ils aient une position et un affichage clairs sur la page. Ensuite, lorsque la souris se déplace dans le conteneur d'icônes, nous pouvons modifier le conteneur d'icônes et le style CSS de l'icône pour obtenir l'effet flottant de l'icône, améliorant ainsi l'effet dynamique et l'attrait visuel de la page.

2. Étapes de mise en œuvre

Maintenant, présentons en détail comment obtenir l'effet d'icônes flottantes lorsque la souris les survole via JavaScript.

1. Tout d'abord, nous devons créer un conteneur d'image div dans le fichier HTML et l'icône img qui doit flotter.

<div id="icon-container">
  <img id="icon" src="icon.png">
</div>

2. Ensuite, nous devons définir les styles CSS pour le conteneur div et l'icône img.

#icon-container {
  position: relative;
  width: 100px;
  height: 100px;
}

#icon {
  position: absolute;
  width: 50px;
  height: 50px;
}

3. Ensuite, nous devons écrire du code JavaScript pour obtenir l'effet flottant de l'icône en obtenant le conteneur d'icônes et l'élément d'icône. Le code spécifique est le suivant :

// 获取图标容器和图标元素
var iconContainer = document.getElementById("icon-container");
var icon = document.getElementById("icon");

// 监听鼠标移入图标容器的事件
iconContainer.addEventListener("mouseover", function() {
  // 计算图标的随机位置
  var left = Math.floor(Math.random() * (iconContainer.offsetWidth - icon.offsetWidth));
  var top = Math.floor(Math.random() * (iconContainer.offsetHeight - icon.offsetHeight));

  // 修改图标容器和图标的CSS样式，实现图标浮动的效果
  icon.style.left = left + "px";
  icon.style.top = top + "px";
});

// 监听鼠标移出图标容器的事件
iconContainer.addEventListener("mouseout", function() {
  // 将图标重置到容器的中央位置
  icon.style.left = (iconContainer.offsetWidth - icon.offsetWidth) / 2 + "px";
  icon.style.top = (iconContainer.offsetHeight - icon.offsetHeight) / 2 + "px";
});

Dans le code ci-dessus, nous obtenons d'abord les éléments div du conteneur d'icônes et icon img via la méthode getElementById. Ensuite, nous écoutons les événements d'entrée et de sortie de la souris sur le conteneur d'icônes. Lorsque la souris entre, nous déplaçons l'icône vers différentes positions dans le conteneur en calculant une position aléatoire. Lorsque la souris est déplacée, nous réinitialisons l'icône au centre du conteneur.

3. Démonstration de l'effet

Enfin, jetons un coup d'œil à l'effet d'affichage réel de l'utilisation de JavaScript pour obtenir l'effet de faire flotter la souris sur l'icône. Ce qui suit est un effet de démonstration simple :

9faadc20f07715afc3f9fa79abe3ae0b
Voir l'icône animée Pen avec Vanilla JS par ryuchee (@ryuchee) sur CodePen.
065276f04003e4622c4fe6b64f465b88

(Remarque : veuillez support dans Afficher l'effet dans le navigateur iframe)

Vous pouvez voir que lorsque la souris entre et sort du conteneur d'icônes, l'icône se déplacera de manière aléatoire vers différentes positions dans le conteneur, obtenant ainsi l'effet d'icônes flottantes. Dans le même temps, étant donné que l'effet flottant de la souris sur l'icône implémenté par JavaScript peut ajuster de manière flexible son style CSS et ses effets d'animation en fonction des besoins de conception spécifiques, sa gamme d'applications dans la conception Web est très large.

En bref, l'utilisation de JavaScript pour obtenir l'effet de faire flotter la souris sur les icônes peut ajouter des fonctionnalités dynamiques vives à la conception Web et améliorer l'interactivité et l'attractivité de la page.

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!