首页 > 其他分享> > 匀速透明封装（透明度）

匀速透明封装（透明度）

2021-09-03 19:59:50 作者：互联网

<!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);
}

标签：opacity,function,obj,0.01,透明度,odiv,time,封装,匀速
来源： https://blog.csdn.net/weixin_51525398/article/details/120089169