Question

我有一个非常简单的HTML页面，其中包含一个图像和一个按钮。这个想法是，当点击按钮时，图像会变为另一个图像。

目前，我在使用以下javascript点击按钮时成功更改了图像：

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

但是，我想知道是否有一些简单而简单的方法可以使更改像转换一样，例如两个图像之间的交叉淡入淡出，只有javascript和css。

Answer 1

可以一步一步完成：

在原始图像的相同位置创建一个img元素。
增加所述元素的z-index
隐藏元素
将元素添加到DOM
慢慢淡入视图。

请参阅下面的工作单元：

SOLN 1：使用纯Javascript＆amp;没有CSS3的filter: alpha甚至适用于IE-5 +等旧版浏览器：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

SOLN 2：针对IE10 +，Chrome 26 +，Fx 16 +，Op 12.1 +的CSS3过渡的替代解决方案：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

注意：我还没有能够在像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 opacity 1个img，另一个opacity { {1}}的{1}}。

然后，当点击0时，不透明的button将img transition opacity和0透明img转换为opacity的{{1}}。

示例：

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; }

Answer 4

如果你想要＆＃34;图像B＆＃34;当＆＃34;图像A＆＃34;正在逐渐消失。

我认为你可以让＆＃34;图像B＆＃34;首先在＆＃34;图像A＆＃34;之上，但将其设为opacity: 0

此外，您可以使用transition-delay来转换＆＃34;图像B＆＃34;

推迟一点

我想这就是你的意思＆＃34;交叉淡出＆＃34;

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

结论

＆＃34;图片B＆＃34;在＆＃34;图像A＆＃34;之上，但它将是透明的
当用户点击＆＃34;图像A＆＃34;时，我们添加了课程＆＃34;淡出＆＃34;在＆＃34;图像A＆＃34;和＆＃34;淡入淡出＆＃34;在＆＃34;图像B＆＃34;
当＆＃34;淡出＆＃34;完成，添加课程＆＃34;隐藏＆＃34;在＆＃34;图像A＆＃34;

Click上的交叉渐变图像转换

4 个答案:

结论