完整代码
精慕门9383623
2019-08-17 16:49
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
#div2{
width:200px;
height:200px;
filter: alpha(opacity=30);
background:red;
opacity:0.3;
}
</style>
</head>
<body>
<div id="div2"></div>
</body>
<script>
window.onload=function(){
var Divt=document.getElementById("div2");
Divt.onmouseover=function(){
startop(100);
}
Divt.onmouseout=function(){
startop(30);
}
}
var timet=null;
var alpha=30;
function startop(Target){
var Divt=document.getElementById("div2");
clearInterval(timet);
timet=setInterval(function(){
var speed=0;
if(alpha > Target){
speed=-10;
}
else{
speed=10;
}
if(alpha == Target){
clearInterval(timet);
}else{
alpha+=speed;
Divt.style.filter = 'alpha(opactiy='+alpha+')';
Divt.style.opacity = alpha/100;
}
},30);
}
</script>
</html>
1回答
-
- qq_繁星似锦_0
- 2019-09-04 20:53:36
非常好！
JS动画效果
113925 学习 · 1443 问题
相似问题