javascript特效程式碼大全

JavaScript是一種非常強大的程式語言，可以用來創造各種動態和互動的網頁效果。以下是一些常見的JavaScript特效程式碼範例：

1、滑鼠懸停效果

html
nbsp;html>  
  
  
 <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>  
  
  
 <div></div>  
  

2、輪播圖效果

html
nbsp;html>  
  
  
 <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>  
  
  
 <div>  
 <img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="javascript特效程式碼大全" >  
 <img  src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="javascript特效程式碼大全" >  
 <img  src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="javascript特效程式碼大全" >  
 <img  src="/static/imghwm/default1.png" data-src="image4.jpg" class="lazy" alt="javascript特效程式碼大全" >  
 </div>  
 <script>  
 var carousel = document.querySelector(&#39;.carousel&#39;);  
 var images = carousel.querySelectorAll(&#39;img&#39;);  
 var currentIndex = 0;  
 setInterval(function() {  
 images[currentIndex].style.display = &#39;none&#39;;  
 currentIndex = (currentIndex + 1) % images.length;  
 images[currentIndex].style.display = &#39;block&#39;;  
 }, 2000); // 每2秒切换一次图片  
 </script>  
  

以上是javascript特效程式碼大全的詳細內容。更多資訊請關注PHP中文網其他相關文章！