javascript - 图像背景已经改变，我可以将它放入浏览器窗口并淡入淡出吗

Question

您好，下面是我的 JS 代码，用于每 30 秒更改一次背景图像。有人可以告诉我是否有一种方法可以更改代码以使图像适合浏览器窗口（100％），并且如果我可以在此代码中使用任何 JS 来使图像无缝淡入和淡出，并且优雅地。

<script>
bgArr = ['images/bg1.jpg', 'images/bg2.jpg', 'images/bg3.jpg'];
bgCur = 0;
backgroundSwitch = function()
{
if (bgCur == bgArr.length) bgCur = 0;
document.body.style.backgroundImage = 'url('+ bgArr[bgCur++]+ ')';
}
window.setInterval(backgroundSwitch, 30000); // Switch every 30 seconds.
</script>

谢谢大家

Answer 1

CSS3 引入background-size: cover。这会自动调整背景图像的大小以覆盖整个父元素，水平或垂直缩放以填充。

请参阅MDN上的条目。

background-size所有主流浏览器都支持。

Answer 2

适合浏览器窗口应该足够简单。根据您的浏览器要求，您可能能够摆脱background-size: coverCSS（请参阅Albert 的回答）。

至于动画，您可以使用 CSS 过渡并通过 JavaScript 触发它们（通常通过修改类）或使用 JavaScript 来完成。

如果使用 JavaScript，请务必设置一个持续时间，然后在状态之间设置lerp（或其他方法）。

这是一般的想法...

var img = document.getElementById("fade");

var fadeLength = 5500;
var opacity = 0;
var startTime = Date.now();

requestAnimationFrame(function me() { 
    // It's faded in, stop animating!
    if (opacity >= 1) {
       return;   
    }

    opacity = (Date.now() - startTime) / fadeLength;
    img.textContent = opacity;    
    img.style.opacity = opacity;        
    requestAnimationFrame(me);
});

js小提琴。