前端--js实现透明度动画效果
程序员文章站
2024-03-24 20:25:16
...
这个效果的实现和我的上一篇博客一样，主要还是应用setInterval(fun(),milltime); 其中fun() 是每隔milltime毫秒要执行的函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>透明度动画</title>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#div1{
width: 200px;
height: 200px;
background-color: red;
opacity: 0.3;
filter: alpha(opacity=30);
}
</style>
<body>
<div id="div1">
</div>
</body>
<script type="text/javascript">
var div1 = document.getElementById("div1");
div1.onmouseover = function(){
startMove(100);
}
div1.onmouseout = function(){
startMove(30);
}
var timer = null;
var alpha = 30;
var startMove = function(iTarget){
clearInterval(timer);
var speed = 0;
if(iTarget > alpha){
speed = 5;
}else {
speed = -5;
}
timer = setInterval(function(){
if(alpha == iTarget){
clearInterval(timer);
}else {
alpha += speed;
div1.style.filter = 'alpha(opacity='+ alpha + ')';
div1.style.opacity = alpha/100;
}
},30);
}
</script>
</html>