<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
background-color: skyblue;
position: absolute;
top: 200px;
left: 400px;
opacity: 0.6;
}
</style>
<body>
<div></div>
</body>
</html>
<script src="匀速透明.js"></script>
匀速透明.js
let odiv=document.querySelector("div");
let time=null;
function move(obj,target){
clearInterval(time);
time=setInterval(function(){
let speed=target>getComputedStyle(obj,false)["opacity"]?0.01:-0.01;
obj.style.opacity=Number(getComputedStyle(obj,false)["opacity"])+speed;
if(obj.style.opacity==1||obj.style.opacity==0.01){
clearInterval(time);
}
},50)
}
odiv.onmouseover=function(){
move(odiv,1);
}
odiv.onmouseout=function(){
move(odiv,0.01);
}