上栗子
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>透明度变化动画</title>
<style>
*{margin: 0;padding: 0;}
#div{
position: relative;
top: 0;
width: 200px;
height: 200px;
background: orange;
filter:alpha(opacity:30);
opacity: .3;
}
</style>
</head>
<body>
<div id="div"></div>
<script>
window.onload = function(){
var oDiv = document.getElementById('div');
oDiv.onmouseover = function(){
startMove(100);
}
oDiv.onmouseout = function(){
startMove(30);
}
var timer;
var alpha=30;
var speed;
function startMove(tag){
clearInterval(timer);
timer = setInterval(function(){
if(alpha > tag){
speed = -10;
}else{
speed = 10;
}
if(alpha == tag){
clearInterval(timer);
}else{
alpha += speed;
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = alpha/100;
}
},30)
}
}
</script>
</body>
</html>