原生JS透明度动画案例

最新推荐文章于 2024-10-14 10:36:20 发布

Agwenbi

最新推荐文章于 2024-10-14 10:36:20 发布

阅读量300

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Ag_wenbi/article/details/109580042

版权

JavaScript 专栏收录该内容

47 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>透明度动画</title>
</head>
<style>
    *{margin: 0;padding: 0;}
    #box{width: 100px;height: 100px;background: red;opacity: 1;}
</style>
<body>
    <div id="box"></div>
</body>
<script>
    window.onload = () => {
        const boxElem = document.getElementById("box");
        let obj = {
            boxElem,
            timer:null
        }
        boxElem.onmouseover = () => {
            velocity.call(obj,100,10);//this对象，开始时的透明度，结束时的透明度
        }
        boxElem.onmouseout = () => {
            velocity.call(obj,30,100);//this对象，开始时的透明度，结束时的透明度
        }
    }
    function velocity(start,end){//开始时的透明度,结束时的透明度
        this.timer && clearInterval(this.timer);
        let tempOpacity = start;
        this.timer = setInterval(() => {
            if(tempOpacity === end){
                clearInterval(this.timer);
                return;
            }
            tempOpacity = tempOpacity + (start === 100 ? -10 : 10);
            this.boxElem.style.opacity = tempOpacity / 100;
        }, 30);
    }
</script>
</html>