我尝试使用以下代码更改背景图像
$('#mask').css({'background-image' : 'url('changingVar')',
'background-repeat' : 'no-repeat',
'background-position': 'center',
'background-size': 'cover',
});
并setTimeout
等待时间。
但是我想要一个不断变化的动画,例如:http://www.luckywok.at
问题是当我使用fadeout
并且fadeIn
它逐渐淡出并出现在我的整个屏幕中时,因为我在所有内容周围都有一个包装器 DIV(#Mask)。
有谁知道该特定站点使用了什么方法?
简单的解决方案。
全屏 : http://jsfiddle.net/9GwNG/3/show/
JSFIDDLE : http://jsfiddle.net/9GwNG/3/
// code was written in a hurry
//
var step = 1;
function bg(){
var opacity = 0.0;
if (step == 3){
n = 3;
step = 1;
opacity = 1.0;
$("#item_"+step).animate({'opacity':opacity},2000);
$("#item_"+n).animate({'opacity': 0.0},2000);
return;
}
n = step+1;
$("#item_"+step).animate({'opacity':opacity},2000);
$("#item_"+n).animate({'opacity':1.0},2000);
step = n;
}
function loop(){
setInterval(bg,4000);
}
setTimeout(loop,500);
只需使用 CSS- Transitions 和 setInterval 函数。http://jsbin.com/ugERaZO/1/edit
过渡支持> ie9 请参阅caniuse。