360开机小助手js循环效果出现的问题

最新推荐文章于 2024-11-08 16:09:18 发布

zazahuiweb蓝月亮

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量121

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_38022684/article/details/106020386

版权

本文探讨了如何使用JavaScript实现一个点击按钮后元素进行360度下移右移的循环动画效果。作者遇到的问题在于不确定在onclick事件中嵌套addEventListener是否会重复注册行为，希望得到关于代码实现和事件监听原理的解答。文中附带相关图片以辅助说明问题。

摘要由CSDN通过智能技术生成

360开机小助手js循环效果

这里我想用这个案例探讨一下onclick和addEventListener嵌套问题，下面是案例的整体代码

<style>
        .box {
            width: 322px;
            position: fixed;
            bottom: 0;
            right: 0;
            overflow: hidden;
        }

        span {
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 20px;
            cursor: pointer;
        }

        .bd {
            height: 105px;
            transition: all 2s;
        }

        .box {
            transition: all 0.6s;
        }
    </style>
    <body>
    <div class="box" id="box">
        <span id="closeButton"></span>
        <div class="hd" id="headPart"><img src="images/t.jpg" alt=""></div>
        <div class="bd" id="bottomPart"><img src="images/b.jpg" alt=""></div>
    </div>
</body>

<script>
    window.onload = function () {
        setInterval(function () {
            var btn = document.querySelector('#closeButton')
            var bottomPart = document.querySelector('#bottomPart')
            var box = document.querySelector('#box')

            btn.onclick = function () {
                bottomPart.style.height = 0
            //     bottomPart.addEventListener('transitionend', function () {
            //     box.style.width = 0;
            // })
            console.log(1);
            
            }
            bottomPart.addEventListener('transitionend', function () {
                box.style.width = 0;
                console.log(2);
                
            })
            console.log(3);
            
            bottomPart.style.height = 105+'px'
            box.style.width = 322+'px';
        }, 10000)
    }
</script>