快乐小demo-JS实现图片的淡入淡出

最新推荐文章于 2021-12-22 15:57:26 发布

火腿肠烧烤大赛冠军

最新推荐文章于 2021-12-22 15:57:26 发布

阅读量113

点赞数

分类专栏：快乐小demo 文章标签： js javascript

本文链接：https://blog.csdn.net/s2422617864/article/details/108619394

版权

快乐小demo 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JS实现图片的淡入淡出（实战中将div换成图片即可）

<!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 type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #b1,
        #b2,
        #b3 {
            width: 100px;
            height: 100px;
            background: deepskyblue;
            opacity: 0.3;
        }

        #b2 {
            background: palevioletred;
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <div id="b1"></div>
    <div id="b2"></div>
    <div id="b3"></div>
    <script>
        //获取所有div
        var oDiv = document.querySelectorAll('div');
        //给每一个div绑定移入和移除事件
        for (var i = 0; i < oDiv.length; i++) {
            oDiv[i].alpha = 30;
            oDiv[i].onmouseover = function () {
                move(this, 100)
            }
            oDiv[i].onmouseout = function () {
                move(this, 30)
            }
        }
        //move函数
        function move(obj, index) {
            // var speed = 0;
            var times = '';
            clearInterval(times);
            times = setInterval(() => {
                var speed = index - obj.alpha > 0 ? 1 : -1;
                //如果透明度和所设置的标准相同则停止
                if (index == obj.alpha) {
                    clearInterval(times);
                } else {
                    obj.alpha += speed;
                    obj.style.opacity = obj.alpha / 100;
                }

            }, 30);

        }
    </script>
</body>

</html>```

火腿肠烧烤大赛冠军

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
快乐小demo-JS实现图片的淡入淡出

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 type="text/css"&g
复制链接

扫一扫

专栏目录