我有一个非常简单的 HTML 页面,只有一个图像和一个按钮。这个想法是,当单击按钮时,图像会更改为另一个图像。
目前,我已经成功地通过使用以下 javascript 单击按钮来更改图像:
document.getElementById("img").src="img2.jpg";
但是,我想知道是否有一些简单易行的方法可以像过渡一样进行更改,例如两个图像之间的淡入淡出,仅使用 javascript 和 css。
最佳答案
可以分步进行:
- 在原始图像的相同位置创建一个 img 元素。
- 增加所述元素的 z-index
- 隐藏元素
- 将元素添加到 DOM 中
- 慢慢淡入视野。
请参阅下面的工作片段:
SOLN 1:使用纯 Javascript 和 filter: alpha
,即使是像 IE-5+ 这样的旧浏览器也没有 CSS3:
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 转换的备用 soln:
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 等非常旧的浏览器中进行实际测试,但理论上应该运行良好。如果您发现差异,请发表评论。
关于javascript - 单击时交叉淡入淡出图像过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38813239/