html 透明度渐变效果,JavaScript动画之透明度渐变

效果图

demo

*{

margin: 0;

padding: 0;

}

#box{

width: 200px;

height: 200px;

margin: 0 auto;

background-color: #6cccf2;

opacity: 0.3;

}

window.οnlοad=function(){

var box = document.getElementById('box');

box.οnmοuseοver=function(){

startChange(100);

};

box.οnmοuseοut=function(){

startChange(30);

};

};

var timer = null;

function startChange(oTarget){

var speed = 0;

var box = document.getElementById('box');

var alpha = box.style.opacity*100;

if(alpha

speed=10;

}else if(alpha>oTarget){

speed= -10;

}

clearInterval(timer);

timer = setInterval(function(){

alpha = alpha + speed;

box.style.opacity = alpha/100;

if(alpha===oTarget){

clearInterval(timer);

}

},30);

}