javascript 특수 효과 코드 모음_javascript 특수 효과 코드 모음 소개-일반적인 문제-php.cn

JavaScript 특수 효과 코드 수집

小老鼠

풀어 주다： 2023-12-14 09:44:44

원래의

2012명이 탐색했습니다.

JavaScript는 다양한 동적 및 대화형 웹 페이지 효과를 만드는 데 사용할 수 있는 매우 강력한 프로그래밍 언어입니다. 다음은 몇 가지 일반적인 JavaScript 특수 효과 코드 예입니다.

1. 마우스 오버 효과

html
<!DOCTYPE html>  
<html>  
<head>  
 <title>Hover Effect</title>  
 <style>  
 .hover-effect {  
 width: 100px;  
 height: 100px;  
 background-color: #f00;  
 transition: background-color 0.5s ease;  
 }  
 .hover-effect:hover {  
 background-color: #0f0;  
 }  
 </style>  
</head>  
<body>  
 <div class="hover-effect"></div>  
</body>  
</html>

로그인 후 복사

2. 회전판 효과

html
<!DOCTYPE html>  
<html>  
<head>  
 <title>Carousel Effect</title>  
 <style>  
 .carousel {  
 width: 300px;  
 height: 200px;  
 overflow: hidden;  
 position: relative;  
 }  
 .carousel img {  
 width: 100%;  
 height: auto;  
 }  
 .carousel img:first-child {  
 position: absolute;  
 left: 0;  
 top: 0;  
 }  
 .carousel img:nth-child(2) {  
 position: absolute;  
 right: 0;  
 top: 0;  
 }  
 .carousel img:nth-child(3) {  
 position: absolute;  
 left: 0;  
 bottom: 0;  
 }  
 .carousel img:nth-child(4) {  
 position: absolute;  
 right: 0;  
 bottom: 0;  
 }  
 </style>  
</head>  
<body>  
 <div class="carousel">  
 <img src="image1.jpg" alt="Image 1">  
 <img src="image2.jpg" alt="Image 2">  
 <img src="image3.jpg" alt="Image 3">  
 <img src="image4.jpg" alt="Image 4">  
 </div>  
 <script>  
 var carousel = document.querySelector('.carousel');  
 var images = carousel.querySelectorAll('img');  
 var currentIndex = 0;  
 setInterval(function() {  
 images[currentIndex].style.display = 'none';  
 currentIndex = (currentIndex + 1) % images.length;  
 images[currentIndex].style.display = 'block';  
 }, 2000); // 每2秒切换一次图片  
 </script>  
</body>  
</html>

로그인 후 복사

위 내용은 JavaScript 특수 효과 코드 수집의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!