點擊時的淡入淡出圖像過渡

Question

我有一個非常簡單的HTML頁面，其中包含一個圖像和一個按鈕。 這個想法是，當單擊按鈕時，圖像將更改為另一圖像。

目前，通過使用以下javascript，單擊按鈕時我已成功更改了圖像：

document.getElementById("img").src="img2.jpg";

但是，我想知道是否有一些簡單易行的方法來進行更改，例如過渡，例如僅使用javascript和css在兩個圖像之間進行淡入淡出。

Answer 1

可以分步進行：

1. 在原始圖像的相同位置創建一個img元素。
2. 增加所述元素的z-index
3. 隱藏元素
4. 將元素添加到DOM
5. 將其逐漸淡入視圖。

請參閱下面的工作片段 ：

SOLN 1：使用純Javascript和filter: alpha即使是IE-5 +等舊版瀏覽器，也沒有CSS3的filter: alpha ：

 function act() { var element = document.createElement("img"); element.src = "http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"; var op = 0.1; // initial opacity element.style.opacity = op; document.body.appendChild(element); element.style.display = 'block'; var timer = setInterval(function() { if (op >= 1) { clearInterval(timer); } element.style.opacity = op; element.style.filter = 'alpha(opacity=' + op * 100 + ")"; // IE 5+ Support op += op * 0.1; }, 50); } 

 img { position: absolute; top: 30px; left: 0px; width: 300px; height: 300px; } 

 <button onclick='act()'>FADE CHANGE</button> <br /> <img id="img" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/287.jpg"> 

SOLN 2：具有針對IE10 +，Chrome 26 +，Fx 16 +，Op 12.1+的CSS3過渡的備用解決方案：

 var element = document.createElement("img"); element.src = "http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"; document.body.appendChild(element); element.style.opacity = 0; element.style.transition = "opacity 1s"; function act() { element.style.opacity = 1; } 

 img { position: absolute; top: 30px; left: 0px; width: 300px; height: 300px; } 

 <button onclick='act()'>FADE CHANGE</button> <br /> <img id="img" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/287.jpg"> 

注意：我還無法在IE 6這樣的舊版瀏覽器中進行實際測試，但從理論上講應該可以正常工作。 如果發現差異，請發表評論。

Answer 2

淡入和淡出圖像。 這是最簡單的方法，但是不會交叉淡入淡出。

CSS：

img { 
-webkit-transition: opacity 0.1s ease-in-out;
-moz-transition: opacity 0.1s ease-in-out;
-o-transition: opacity 0.1s ease-in-out;
transition: opacity 0.1s ease-in-out;
}

.hidden {
  opacity: 0;
}

JS：

var img = document.getElementById('i');
setInterval(function() { 
  img.className += ' hidden';
  img.src="http://lorempixel.com/400/200/";

  setTimeout(function() {
    img.className = img.className.replace('hidden', '');
  }, 100);
}, 1000);

https://jsfiddle.net/9tksj3fa/2/

Answer 3

您可以將一個img垂直放置在另一個img的上方，然后將一個img的opacity為1 ，將另一個img的opacity為0 。

然后，當單擊button時，不透明img將transition為opacity 0 ，透明img將轉換為opacity 1 。

例：

 var images = document.getElementsByTagName('img'); var button = document.getElementsByTagName('button')[0]; function crossFade() { for (var i = 0; i < images.length; i++) { images[i].classList.toggle('transparent'); images[i].classList.toggle('opaque'); } } button.addEventListener('click',crossFade,false); 

 button, .images { display: inline-block; position: relative; margin: 24px; vertical-align: middle; } .image-1, .image-2 { position: absolute; top: 0; left: 0; transition: opacity 2s ease-out; } .images, .image-1, .image-2 { width: 140px; height: 140px; } .image-1 { background-color: rgb(255,0,0); } .image-2 { background-color: rgb(255,255,0); } .opaque { opacity: 1; } .transparent { opacity: 0; } 

 <button type="button">Cross Fade</button> <div class="images"> <img class="image-1 opaque" alt="Image 1" /> <img class="image-2 transparent" alt="Image 2" /> </div> 

Answer 4

如果要在“圖像A”漸弱時淡入“圖像B”。

我認為您可以先將“圖像B”放在“圖像A”之上，但使其opacity: 0

另外，您可以使用transition-delay來讓“ image B”的過渡

推遲一點

我想這就是你所說的“淡入淡出”

http://jsbin.com/sigihazuka/edit?html,css,js,output

結論

1. “圖像B”位於“圖像A”的頂部，但是它將是透明的
2. 當用戶單擊“圖像A”時，我們在“圖像A”上添加“淡出”類，在“圖像B”上添加“淡入延遲”
3. 完成“淡出”后，在“圖像A”上添加“隱藏”類