淡化动态更改的 (jQuery) 背景图像?
Fading a dynamically changed (jQuery) background image?
我正在使用的网站上有一个块,其中包含一些按钮和背景图片。
我需要每 3 秒更改一次背景图像,所以我有以下 javascript :
jQuery('.myBlock').css({"background-image" : "url(img1)"});
var counter = 0;
function setBckImage(){
if(counter<3){
counter++;
} else {
counter=1;
}
switch (counter){
case 1:
jQuery('.myBlock').css({"background-image" : "url(img1)"});
break;
case 2:
jQuery('.myBlock').css({"background-image" : "url(img2)"});
break;
case 3:
jQuery('.myBlock').css({"background-image" : "url(img3)"});
break;
}
}
setInterval(setBckImage, 3000);
有效,但变化是 "sudden",我希望它更平滑,添加 fadein/fadeout 效果。我怎样才能做到这一点?我看到 this answer that lead to this link 但在这个 link 中,图像在 div 中,它们不是背景图像,所以我不明白如何使这个答案适应我的代码。
有办法实现吗?
你试试this
使用此代码:)
<div id="dvImage" style="height: 308px; width: 410px">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var images = ["Chrysanthemum.jpg", "Desert.jpg", "Hydrangeas.jpg", "Jellyfish.jpg", "Koala.jpg", "Lighthouse.jpg", "Penguins.jpg", "Tulips.jpg"];
$(function () {
var i = 0;
$("#dvImage").css("background-image", "url(images/" + images[i] + ")");
setInterval(function () {
i++;
if (i == images.length) {
i = 0;
}
$("#dvImage").fadeOut("slow", function () {
$(this).css("background-image", "url(images/" + images[i] + ")");
$(this).fadeIn("slow");
});
}, 1000);
});
</script>
可能你想要那种效果?
$('.myBlock').css({"background-image" : "url(http://nakolenke.club/uploads/posts/2016-09/1473248821_kotiki04.jpg)"});
var counter = 0;
function setBckImage(){
if(counter<3){
counter++;
} else {
counter=1;
}
switch (counter){
case 1:
jQuery('.myBlock').css({"background-image" : "url(http://nakolenke.club/uploads/posts/2016-09/1473248821_kotiki04.jpg)"});
break;
case 2:
jQuery('.myBlock').css({"background-image" : "url(http://nakolenke.club/uploads/posts/2016-09/1473248821_kotiki04.jpg)"});
break;
case 3:
jQuery('.myBlock').css({"background-image" : "url(http://i.bigmir.net/img/dnevnik/uploads/cmu_1153/29306/1.jpg)"});
break;
}
}
setInterval(setBckImage, 3000);
.myBlock {
width: 100px;
height: 100px;
background-size: cover;
-webkit-transition: background 700ms ease-in 700ms;
-moz-transition: background 700ms ease-in 700ms;
-o-transition: background 700ms ease-in 700ms;
transition: background 700ms ease-in 700ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myBlock"></div>
一种方法是使用 css 关键帧,您可以将其添加到 .myBlock
.myBlock{
animation: fadeInOut 3s infinite;
}
@keyframes fadeInOut{
0%{
opacity: 0;
}
20%{
opacity: 1;
}
80%{
opacity: 1;
}
100%{
opacity: 0;
}
}
但请记住,如果更改 3 秒间隔,则必须在 css 中也进行更改。
我正在使用的网站上有一个块,其中包含一些按钮和背景图片。
我需要每 3 秒更改一次背景图像,所以我有以下 javascript :
jQuery('.myBlock').css({"background-image" : "url(img1)"});
var counter = 0;
function setBckImage(){
if(counter<3){
counter++;
} else {
counter=1;
}
switch (counter){
case 1:
jQuery('.myBlock').css({"background-image" : "url(img1)"});
break;
case 2:
jQuery('.myBlock').css({"background-image" : "url(img2)"});
break;
case 3:
jQuery('.myBlock').css({"background-image" : "url(img3)"});
break;
}
}
setInterval(setBckImage, 3000);
有效,但变化是 "sudden",我希望它更平滑,添加 fadein/fadeout 效果。我怎样才能做到这一点?我看到 this answer that lead to this link 但在这个 link 中,图像在 div 中,它们不是背景图像,所以我不明白如何使这个答案适应我的代码。
有办法实现吗?
你试试this
使用此代码:)
<div id="dvImage" style="height: 308px; width: 410px">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var images = ["Chrysanthemum.jpg", "Desert.jpg", "Hydrangeas.jpg", "Jellyfish.jpg", "Koala.jpg", "Lighthouse.jpg", "Penguins.jpg", "Tulips.jpg"];
$(function () {
var i = 0;
$("#dvImage").css("background-image", "url(images/" + images[i] + ")");
setInterval(function () {
i++;
if (i == images.length) {
i = 0;
}
$("#dvImage").fadeOut("slow", function () {
$(this).css("background-image", "url(images/" + images[i] + ")");
$(this).fadeIn("slow");
});
}, 1000);
});
</script>
可能你想要那种效果?
$('.myBlock').css({"background-image" : "url(http://nakolenke.club/uploads/posts/2016-09/1473248821_kotiki04.jpg)"});
var counter = 0;
function setBckImage(){
if(counter<3){
counter++;
} else {
counter=1;
}
switch (counter){
case 1:
jQuery('.myBlock').css({"background-image" : "url(http://nakolenke.club/uploads/posts/2016-09/1473248821_kotiki04.jpg)"});
break;
case 2:
jQuery('.myBlock').css({"background-image" : "url(http://nakolenke.club/uploads/posts/2016-09/1473248821_kotiki04.jpg)"});
break;
case 3:
jQuery('.myBlock').css({"background-image" : "url(http://i.bigmir.net/img/dnevnik/uploads/cmu_1153/29306/1.jpg)"});
break;
}
}
setInterval(setBckImage, 3000);
.myBlock {
width: 100px;
height: 100px;
background-size: cover;
-webkit-transition: background 700ms ease-in 700ms;
-moz-transition: background 700ms ease-in 700ms;
-o-transition: background 700ms ease-in 700ms;
transition: background 700ms ease-in 700ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myBlock"></div>
一种方法是使用 css 关键帧,您可以将其添加到 .myBlock
.myBlock{
animation: fadeInOut 3s infinite;
}
@keyframes fadeInOut{
0%{
opacity: 0;
}
20%{
opacity: 1;
}
80%{
opacity: 1;
}
100%{
opacity: 0;
}
}
但请记住,如果更改 3 秒间隔,则必须在 css 中也进行更改。