照片集是展示你的攝影作品的絕佳方式，但它們也可以變得沉悶乏味。通過添加一些 JavaScript (JS) 特效，你可以讓你的相冊充滿活力，讓游客更沉浸其中。

1. 漸入漸出效果

漸入漸出效果會讓你的照片以一種流暢優雅的方式淡入或淡出。這是一種簡單的效果，可以為你的相冊增添一絲精致感。

function fadeInOut(element) {element.style.opacity = 0;const interval = setInterval(function() {element.style.opacity += 0.1;if(element.style.opacity >= 1) {clearInterval(interval);}}, 50);
}

要使用漸入漸出效果，只需將以下代碼添加到你的 JavaScript 文件中，并調用 fadeInOut() 函數傳遞要淡入或淡出的元素即可。

2. 縮放效果

縮放效果會使你的照片在鼠標懸停時放大或縮小。這是一種吸引人的效果，可以讓游客仔細觀察你的照片。

function zoom(element) {element.style.transform = "scale(1)";element.addEventListener("mouseenter", function() {element.style.transform = "scale(1.2)";});element.addEventListener("mouseleave", function() {element.style.transform = "scale(1)";});
}

要使用縮放效果，只需將以下代碼添加到你的 JavaScript 文件中，并調用 zoom() 函數傳遞要縮放的元素即可。

3. 幻燈片效果

幻燈片效果會自動切換你的照片，創建一個引人入勝的展示。這是一種展示大量照片的好方法。

function slideshow(element) {const images = element.querySelectorAll("img");let currentImage = 0;setInterval(function() {images[currentImage].style.display = "none";currentImage = (currentImage + 1) % images.length;images[currentImage].style.display = "block";}, 3000);
}

要使用幻燈片效果，只需將以下代碼添加到你的 JavaScript 文件中，并調用 slideshow() 函數傳遞要變成幻燈片的元素即可。

4. 光箱效果

光箱效果會創建一個模態窗口，在其中顯示你的照片。這是一種很好的方式，可以讓游客放大你的照片，并更詳細地查看它們。

function lightbox(element) {const lightbox = document.createElement("div");lightbox.style.position = "fixed";lightbox.style.top = "0";lightbox.style.left = "0";lightbox.style.width = "100%";lightbox.style.height = "100%";lightbox.style.backgroundColor = "rgba(0, 0, 0, .8)";lightbox.style.zIndex= 999;const closeButton = document.createElement("button");closeButton.innerHTML = "關閉";closeButton.style.position = "absolute";closeButton.style.top = "10px";closeButton.style.right = "10px";closeButton.style.padding = "10px 20px";closeButton.style.backgroundColor = "fff";closeButton.style.color = "000";closeButton.style.cursor = "pointer";closeButton.addEventListener("click", function() {lightbox.parentNode.removeChild(lightbox);});const image = document.createElement("img");image.style.position = "absolute";image.style.top = "50%";image.style.left = "50%";

---

---

相關標簽： 提升你的照片集、 通過JS特效為你的相冊增添動態、 提高照片質量、

上一篇：揭開JS相冊的秘密用視覺效果點亮你的畫廊ja

下一篇：革新你的在線相冊利用JS特效提升視覺吸引力