htnm5는 자바스크립트를 사용하여 아이콘 위에 마우스를 띄웁니다.

웹 디자인에서 아이콘은 종종 페이지의 필수적인 부분입니다. 그러나 이러한 아이콘을 어떻게 더 생생하게 만들고, 페이지의 상호작용성과 매력을 어떻게 높일 것인가가 매우 중요한 문제가 되었습니다. 마우스가 아이콘 위로 지나가는 효과를 얻기 위해 JavaScript를 사용하면 이러한 요구를 정확하게 충족할 수 있으며 웹 디자인에 새로운 시각적 경험을 가져올 수 있습니다.

1. 구현 원리

JavaScript를 사용하여 마우스가 아이콘 위로 지나가는 효과를 얻으려면 CSS 스타일을 수정해야 합니다. 특히 아이콘의 위치 속성을 "absolute"로 설정하여 이미지 컨테이너 내에서 자유롭게 이동할 수 있도록 해야 합니다. 다음으로 아이콘 컨테이너와 아이콘 자체의 너비와 높이를 설정하여 페이지에서 위치가 명확하고 표시되도록 해야 합니다. 그런 다음 마우스가 아이콘 컨테이너로 이동하면 아이콘 컨테이너와 아이콘의 CSS 스타일을 수정하여 아이콘의 부동 효과를 달성함으로써 페이지의 동적 효과와 시각적 매력을 향상시킬 수 있습니다.

2. 구현 단계

이제 JavaScript를 통해 마우스가 아이콘 위로 지나갈 때 아이콘이 떠 있는 효과를 얻는 방법을 자세히 소개하겠습니다.

1. 먼저 HTML 파일에 이미지 컨테이너 div를 만들고 플로팅해야 하는 아이콘 img를 만들어야 합니다.

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

2. 다음으로 컨테이너 div 및 아이콘 img에 대한 CSS 스타일을 설정해야 합니다.

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

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

3. 그런 다음 아이콘 컨테이너와 아이콘 요소를 가져와 아이콘의 부동 효과를 달성하는 JavaScript 코드를 작성해야 합니다. 구체적인 코드는 다음과 같습니다.

// 获取图标容器和图标元素
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";
});

위 코드에서는 먼저 getElementById 메소드를 통해 아이콘 컨테이너 div 및 아이콘 img 요소를 가져옵니다. 그런 다음 아이콘 컨테이너에서 마우스 이동 이벤트를 수신합니다. 마우스가 안으로 이동하면 임의의 위치를 ​​계산하여 아이콘을 컨테이너 내 다른 위치로 이동합니다. 마우스가 밖으로 이동하면 아이콘이 컨테이너 중앙으로 재설정됩니다.

3. 효과 시연

마지막으로, 아이콘 위에 마우스를 올리는 효과를 얻기 위해 JavaScript를 사용하는 실제 표시 효과를 살펴보겠습니다. 다음은 간단한 데모 효과입니다.

6d193627e0c5003aa1b7abf0eb0cecc9
CodePen.065276f04003e4622c4fe6b64f465b88

에서 ryuchee(@ryuchee)

의 바닐라 JS가 포함된 펜 애니메이션 아이콘을 확인하세요.

(참고: 제발 iframe 브라우저에서 효과 보기 지원)

마우스가 아이콘 컨테이너 안팎으로 움직일 때 아이콘이 컨테이너 내의 다른 위치로 무작위로 이동하여 아이콘이 떠 있는 효과를 얻는 것을 볼 수 있습니다. 동시에 JavaScript로 구현된 아이콘 위에 마우스를 놓으면 특정 디자인 요구에 따라 CSS 스타일과 애니메이션 효과를 유연하게 조정할 수 있으므로 웹 디자인에서 적용 범위가 매우 넓습니다.

간단히 말하면 JavaScript를 사용하여 마우스가 아이콘 위로 지나가는 효과를 얻으면 웹 디자인에 생생한 동적 기능을 추가하고 페이지의 상호 작용성과 매력을 향상시킬 수 있습니다. 🎜

위 내용은 htnm5는 자바스크립트를 사용하여 아이콘 위에 마우스를 띄웁니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!