JS 实现鼠标移入移出透明度动画变化效果

代码：

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: #06c;
            opacity: 0.3
        }
    </style>
</head>

<body>
    <div></div>

    <script>
        //当鼠标移入div的时候  让div的透明度  动画变成1  鼠标移出div  透明度动画变回0.3
        //1.获取元素
        var div = document.getElementsByTagName("div")[0];
        var timer1 = null;
        var timer2 = null;

        //2.给div 添加事件
        div.onmouseover = function () {
            clearInterval(timer1);
            clearInterval(timer2);
            //透明度 ---> 1
            //1.设置动画三要素
            var start = getStyle(div, "opacity") * 1;
            var end = 1;
            var step = 0.01;
            //2.设置定时器
            timer1 = setInterval(function () {
                //走一步的代码
                //更新起点
                start += step;
                if (start >= end) {
                    clearInterval(timer1);
                    start = end;
                }
                //设置样式
                div.style.opacity = start;
            }, 20)
        }

        div.onmouseout = function () {
            //透明度 --->0.3
            clearInterval(timer1);
            clearInterval(timer2);
            //透明度 ---> 0.3
            //1.设置动画三要素
            var start = getStyle(div, "opacity") * 1;
            var end = 0.3;
            var step = 0.01;
            //2.设置定时器
            timer2 = setInterval(function () {
                //走一步的代码
                //更新起点
                start -= step;
                if (start <= end) {
                    clearInterval(timer2);
                    start = end;
                }
                //设置样式
                div.style.opacity = start;
            }, 20)
        }

        function getStyle(ele, prop) {
            //1.编写主要代码
            //如果 元素.currentStyle == undefined  标准浏览器中
            if (ele.currentStyle == undefined) {
                //为了让 别人 在函数外面 也能得到我们获取的属性值 我们要把属性值返回出来
                return getComputedStyle(ele)[prop];
            } else {
                return ele.currentStyle[prop];
            }
            //2.分析不确定的值 提取出来 作为参数  元素 属性
            //3.将参数带入到 函数中
        }
    </script>
</body>

</html>
复制代码

 

posted @   石海莹  阅读(984)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 字符编码：从基础到乱码解决
历史上的今天：
2019-09-17 SEO搜索引擎优化是什么？
点击右上角即可分享
微信分享提示
AI IDE Trae