JS如何控制背景淡入淡出?

JavaScript012

JS如何控制背景淡入淡出?,第1张

如下代码可以实现,不过你要首先下载一个JS插件:Jquery,我用的是jquery-1.9.1.min.js,你下载下来后放到网页同级目录就可以了,如入代码适用于2张或多张图片。

<div id="imgbox">

<img src="11.jpg" /><img src="22.jpg" />

</div>

<script src="jquery-1.9.1.min.js"></script>

<script>

$(document).ready(function(){

$("#imgbox img").fadeOut(0).eq(0).fadeIn(0)

var i = 0

setInterval(function(){

if($("#imgbox img").length > (i+1)){

$("#imgbox img").eq(i).fadeOut(0).next("img").fadeIn(1000)

i++

}

else{

$("#imgbox img").eq(i).fadeOut(0).siblings("img").eq(0).fadeIn(1000)

i = 0

}

},2000)

})

</script>

1、用jquery的话,fadeIn ,fadeOut , fadeToggle

2、配合css3,用animation或transform变化 opacity 在 0~1间变换就行

3、用setTimeout或requestAnimationFrame 变换 opacity

@keyframes anim

{

from {opacity: 1}

to {opacity: 0}

}

.anim-welcome

{

animation: anim 3s

}

执行时,为需要淡出的节点添加样式anim-welcome,兼容其他浏览器请自查;

该法为css3实现,不管如何兼容IE9-是无效的,全兼容需脚本支持:

$('#node').fadeout()