js动画之简单运动二
透明度的变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画透明度</title>
<style>
.animation{
background-color: green;
height: 100px;
width: 100px;
filter:alpha(opacity:30);
opacity: 0.3;
}
</style>
</head>
<body>
<div id="test" class="animation">animation</div>
</body>
<script type="text/javascript">
window.onload = function(){
var test = document.getElementById("test"),
timer = null,
alpha = 30;
test.onmouseover = function(){
startAnimation(100);
}
test.onmouseout = function(){
startAnimation(30);
}
function startAnimation (alphaTarget) {
clearInterval(timer);
timer = setInterval(function(){
if (alphaTarget == alpha) {
clearInterval(timer);
return;
};
if(alphaTarget > alpha){
alpha += 1;
test.style.filter = 'alpha(opacity:'+alpha+')';
test.style.opacity = alpha/100;
}else{
alpha -= 1;
test.style.filter = 'alpha(opacity:'+alpha+')';
test.style.opacity = alpha/100;
}
},100)
}
}
</script>
</html>
大家可以看到test.style.filter='alpha(opacity:100)'这个是IE的方式
test.style.opacity是DOM浏览器的方式。
