使用JavaScript平滑地更改“body”元素的背景图像
使用JavaScript平滑地更改“body”元素的背景图像
提问于 2014-09-07 00:08:01
我是JS的新手，我正在尝试使用一个简单的JS脚本来转换body{background:;}图像。我希望想出一个更简单的解决方案，利用CSS的background-size:cover属性，而不是将div堆叠在一起，然后更改它们的z-index。使用CSS属性似乎比使用时更好地缩放背景图像(我是一个新手，我可能错了，而且很幼稚)：
$(window).resize(function() {}; 我的问题是，我如何使用下面的代码来更好地在图像之间过渡？我想要动画的过渡，但由于我没有使用堆叠的div，我只是不知道如何。当前在图片过渡之间存在空白。我试图预先加载图像，但这也没有解决问题。
JavaScript：
function slideShow() {
var images = ['http://www.hdwallpapers.in/walls/fantasy_space-wide.jpg', 'http://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg']
setInterval(function(){
document.body.style.backgroundImage="url('"+images[0]+"')";
var firstValue = images.shift();
images.push(firstValue);
}, 5000);
}
slideShow();CSS：
body {
background:#000 no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}任何帮助都将不胜感激。
回答 1
Stack Overflow用户
发布于 2014-09-07 00:19:15
我知道你在这里提到了javascript，但是你考虑过CSS3解决方案吗？转换提供了一种简单的方法来实现这一点。
这里有个例子：http://jsfiddle.net/7eqsy2ug/可能就是你要找的……如果您想要更平滑的过渡，也可以尝试淡入不透明度。
另一种JavaScript选择是：http://rewish.github.io/jquery-bgswitcher/
使用您的JS从JS中编写代码：
body {
background:#000 no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25702127
复制相关文章
相似问题
腾讯云开发者
