gpt4 book ai didi

javascript - 更改背景图像时平滑过渡

转载 作者:太空宇宙 更新时间:2023-11-04 05:52:11 26 4
gpt4 key购买 nike

我有以下 jQuery 来更改 body 背景图像。

(function($, interval, slides) {

var gradient = "linear-gradient(0deg,rgba(0,0,255,0.3),rgba(0,0,255,0.3))";
$('body').css("background", gradient+", url('" + slides[slides.length-1] + "')");

var i = 0;
var handle = setInterval(function () {

var bg = gradient+", url('" + slides[i] + "')";
$('body').css('background', bg);

i++;

if (i >= slides.length) {
i = 0;
}
}, interval);

})(jQuery, 5000, [
"https://source.unsplash.com/CgOaFB56Vyw/1920x1080",
"https://source.unsplash.com/18Q4c6EVf_o/1920x1080",
"https://source.unsplash.com/7uvHtSn5a90/1920x1080"
]);

现在我面临的问题是,背景属性变化的变化并不顺利。有什么方法可以在这里使用 transition 属性来缓和背景图像和渐变的变化并使其更平滑吗?。我试过使用 transition: background-image 3s ease 但这没有效果。请在下面的 fiddle 中找到我的代码。

https://jsfiddle.net/gw6ndfby/2/

最佳答案

This answer与您的情况相关,这表明 CSS3 不支持渐变过渡。此外,您可能希望将 css 应用于 background-image。我尝试围绕应用 css 封装图像加载逻辑以使过渡平滑(无渐变):

(function($, interval, slides) {
var gradient = "linear-gradient(0deg,rgba(0,0,255,0.3),rgba(0,0,255,0.3))";
const img = new Image();
img.onload = function() {
$('body').css("background-image", "url('" + img.src + "')");
}
img.src = slides[slides.length - 1];

var i = 0;
var handle = setInterval(function() {
const img2 = new Image();
img2.onload = function() {
var bg = "url('" + img2.src + "')";
$('body').css('background-image', bg);
i = (i + 1) % slides.length;
}
img2.src = slides[i];
}, interval);

})(jQuery, 4000, [
"https://source.unsplash.com/CgOaFB56Vyw/1920x1080",
"https://source.unsplash.com/18Q4c6EVf_o/1920x1080",
"https://source.unsplash.com/7uvHtSn5a90/1920x1080"
]);
.transition {
transition: background-image 2s ease;
-webkit-transition: background-image 2s ease;
background-size: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body class="transition">
Here come the images
</body>

</html>

编辑:过渡的解决方法是将渐变应用于 body 的伪元素 :before:

.transition:before {
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
background: linear-gradient(0deg, rgba(0, 0, 255, 0.3), rgba(0, 0, 255, 0.3));
}

(function($, interval, slides) {
var gradient = "linear-gradient(0deg,rgba(0,0,255,0.3),rgba(0,0,255,0.3))";
const img = new Image();
img.onload = function() {
$('body').css("background-image", "url('" + img.src + "')");
}
img.src = slides[slides.length - 1];

var i = 0;
var handle = setInterval(function() {
const img2 = new Image();
img2.onload = function() {
var bg = "url('" + img2.src + "')";
$('body').css('background-image', bg);
i = (i + 1) % slides.length;
}
img2.src = slides[i];
}, interval);

})(jQuery, 4000, [
"https://source.unsplash.com/CgOaFB56Vyw/1920x1080",
"https://source.unsplash.com/18Q4c6EVf_o/1920x1080",
"https://source.unsplash.com/7uvHtSn5a90/1920x1080"
]);
.transition:before {
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
background: linear-gradient(0deg, rgba(0, 0, 255, 0.3), rgba(0, 0, 255, 0.3));
}

.transition {
transition: background-image 2s ease;
-webkit-transition: background-image 2s ease;
background-size: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body class="transition">
Here come the images
</body>

</html>

关于javascript - 更改背景图像时平滑过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58162050/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com