[요약] JavaScript가 구현할 수 있는 흥미로운 작은 함수 3가지

JavaScript는 웹 프런트엔드 개발에 널리 사용되는 스크립팅 언어로, 작은 기능을 구현하는 데 풍부한 리소스를 갖고 있습니다. 이 기사에서는 독자가 JavaScript 애플리케이션을 더 잘 이해할 수 있도록 돕기 위해 몇 가지 흥미로운 작은 함수 구현을 소개합니다.

1. 마우스 팔로어

마우스 팔로어는 마우스가 움직일 때마다 요소가 움직일 수 있게 해주는 작은 함수입니다. 이 역동적인 효과는 사람들에게 상호작용적인 느낌을 주며 웹사이트 장식에 적합합니다.

구현 방법:

1. 먼저 아이콘이나 텍스트 등 마우스 움직임을 따라야 하는 요소를 HTML 파일에 정의합니다.

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

2. CSS에서 기본 스타일을 설정하고 요소의 위치를 ​​고정 위치로 설정합니다.

.follow {
   ...
   position: fixed;
}

3. JavaScript에 마우스 청취 이벤트를 추가하고, 요소의 위치를 ​​변경하고, 마우스 위치에 따라 움직이게 합니다.

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

2. 그림 회전판

그림 회전판은 웹사이트에 자주 나타나는 뛰어난 대화형 효과입니다. 그 기능은 다양한 그림 표시 콘텐츠 간에 전환하는 것입니다. 서로 다른 이미지 사이를 전환하여 지속적이고 부드러운 애니메이션 효과를 얻을 수 있습니다.

구현 방법:

1. 먼저 디자인 요구 사항에 따라 HTML 파일에 여러 그림을 정의하거나 CSS에서 배경 이미지를 설정할 수 있습니다.

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

2. CSS에서 이미지 캐러셀의 컨테이너 스타일을 설정하여 캐러셀 프레임을 만듭니다.

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

3. JavaScript에 타이머를 추가하여 이미지 캐러셀을 제어하세요.

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

4. 타이머 내에서 CSS 변환 속성을 사용하여 이미지 전환 애니메이션 효과를 얻습니다.

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. 확장 및 축소

웹페이지에서는 초기 숨기기를 설정해야 하는 경우가 많으며 사용자는 확장된 기능 모듈을 클릭할 수 있습니다. 이 기능 모듈의 구현은 JavaScript 및 CSS를 사용하여 완료할 수 있습니다.

구현 방법:

1. 먼저 HTML 파일에 확장 및 축소가 필요한 모듈을 작성합니다.

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

콘텐츠 요소의 스타일 속성이 없음으로 설정되어 있습니다. 이는 요소가 초기 상태에서 숨겨져 있음을 의미합니다.

2. CSS에서 기본 스타일을 설정하고 클릭 이벤트에 대한 이벤트 리스너를 추가합니다

.box .title {
   cursor: pointer;
}

3. JavaScript 파일에서 addEventListener 메소드를 사용하여 클릭 이벤트를 수신하고 콘텐츠 요소의 상태를 판단합니다. 확장 축소 기능을 전환하려면 CSS의 표시 속성을 사용하세요.

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

위는 세 가지 작은 함수의 구현 방법입니다. JavaScript의 기본 구문과 관련 라이브러리 파일을 잘 사용하면 웹 페이지에서 풍부한 대화형 효과를 얻을 수 있습니다. 독자는 자신의 프로젝트에 이러한 방법을 적용하여 프런트엔드 개발 기술을 향상시킬 수 있습니다.

위 내용은 [요약] JavaScript가 구현할 수 있는 흥미로운 작은 함수 3가지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!