动画背景图像:后元件
问题描述:
有了这个代码:动画背景图像:后元件
#header .banner { background-color:#000; height:270px; }
#header .banner:after { content: ""; background:url(/images/header_1.jpg) center center; width:100%; min-width: 1024px; height:270px; margin: auto; display: block;}
我需要使/images/header_1.jpg为其它图像的过渡,使用JavaScript(jquery的)或CSS3。
这可能吗?
答
有几种方法可以做到这一点,如果你想图像来回交替。最简单的方法是将setInterval与JQuery的.css特性结合使用。
var state = 0;
function start(){
setInterval(function(){
if(state=0){
state = 1;
$("header").css("background","url(/images/header_1.jpg)")
} else {
state = 0;
$("header").css("background","url(/images/header_2.jpg)")
}
},1000);
}
start();
1000表示发生更改之前的时间(以毫秒为单位)。
您还可以简单地将图像转换为动画PNG。
如果您不想让图像来回交替,也可以使setInterval函数包含一个clearInterval,以便一次完成然后停止。 – DaemonOfTheWest 2014-12-11 01:09:28
这里的问题不是该怎么做javascript,而是如何改变:在css元素之后。看看背景不在#header .banner中,而是在他的:after元素中。 – jonyjm 2014-12-11 01:31:06