>웹 프론트엔드 >JS 튜토리얼 >자바스크립트는 어떤 효과를 얻을 수 있나요?

자바스크립트는 어떤 효과를 얻을 수 있나요?

醉折花枝作酒筹
醉折花枝作酒筹원래의
2021-07-21 11:51:139492검색

Javascript는 캐러셀 이미지, 양식 유효성 검사, 페이지의 팝업 상자, 다단계 탭, 웹 페이지의 애니메이션, 떠다니는 광고, 흔들리는 그림, 평점을 얻기 위한 다섯개 별표를 구현할 수 있으며 페이지에 이벤트가 없습니다. 일정 시간 내에 효과가 꺼집니다.

자바스크립트는 어떤 효과를 얻을 수 있나요?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

프론트엔드 개발에서 반드시 배워야 하는 기술이기 때문에 매우 유용할 것 같죠? 네, js로 할 수 있는 일이 너무 많아요. js는 DOM을 쉽게 조작할 수 있기 때문에 클라이언트에 다양한 효과를 줄 수 있습니다. 그렇다면 js는 어떤 효과를 얻나요? 신입생들이 js가 하는 일에 대한 아이디어를 가질 수 있도록, 초보자들이 참고해야 할 몇 가지 일반적인 효과는 다음과 같습니다. 자바스크립트 언어 사용법만 익히면 다음과 같은 효과를 쉽게 만들 수 있습니다.

1. 캐러셀 이미지: 캐러셀 이미지는 일반적으로 아래 그림과 같이 웹사이트 중간에 이미지를 전환하는 곳입니다.

자바스크립트는 어떤 효과를 얻을 수 있나요?

그림을 하나씩 슬라이드하는 효과. 그 원리는 실제로 매우 간단합니다. 중앙에 그림을 표시하는 상자는 한 장의 그림만 표시할 수 있습니다. 실제로 이 상자 내부에는 표시 상자만큼 높은 높이가 있지만 너비는 훨씬 더 큽니다. 이 길고 큰 상자에는 왼쪽에서 오른쪽으로 나란히 배치된 여러 개의 그림이 있습니다. 이 그림은 표시할 때 이 긴 상자의 노출 위치만 변경하면 됩니다. 아래 그림과 같습니다.

자바스크립트는 어떤 효과를 얻을 수 있나요?

js를 통해 이 효과를 얻는 방법: 큰 상자 안에 중첩된 작은 상자를 만들기 위해 CSS 레이아웃이 완료된 후 CSS 위치 지정 기술을 사용하여 사진이 누출되는 효과를 얻을 수 있습니다. 해야 할 일은 위치 지정 Just 값을 동적으로 변경하는 것입니다.

2. 양식 확인: 양식은 계정에 등록하고 로그인할 때 작성해야 하는 부분입니다. 예를 들어 등록할 때 비밀번호를 두 번 입력하면 일치하지 않으면 즉시 빨간색 프롬프트 메시지가 나타납니다. 이것이 js에 의해 생성되는 효과입니다.

자바스크립트는 어떤 효과를 얻을 수 있나요?

3. 페이지의 팝업 상자: 예를 들어 페이지에 나타나는 경고 및 프롬프트 메시지는 모두 js로 만들어졌습니다.

4. 다단계 탭: 타오바오의 상품 카테고리와 마찬가지로 마우스를 올려놓으면 카테고리가 나타나며, 이 카테고리에서 카테고리를 분리하는 등의 작업도 가능합니다. 이런 것도 js에서 할 수 있는 일입니다.

웹 페이지의 애니메이션, 떠다니는 광고, 흔들리는 그림, 점수 효과를 달성하기 위한 다섯개 별 등 js가 할 수 있는 효과가 더 많이 있습니다. 특정 기간 내에 이벤트가 발생하지 않으면 페이지가 닫힙니다. 등. 여기에 모두 나열하지는 않겠습니다. js를 배우면 이러한 효과를 쉽게 만들 수 있습니다.

【추천 학습: javascript 고급 튜토리얼

위 내용은 자바스크립트는 어떤 효과를 얻을 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.