zoukankan      html  css  js  c++  java
  • 封装动画函数总结,,,如何解决target最终为小数的问题(target-element.offsetLeft>0//<0),,如何解决多次点击按钮事件触发定时器效果的叠加问题?

    Document
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    
        div {
            position: absolute;
            top: 50px;
            left: 0;
            height: 200px;
             200px;
            background-color: pink;
    
        }
    
    
        span {
            position: absolute;
            display: inline-block;
            top: 350px;
            left: 0;
            height: 80px;
             80px;
            background-color: blue;
        }
    
    
        button {
            height: 30px;
             120px;
        }
    </style>
    
    <script>
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn500 = document.querySelector('.btn500');
        var btn800 = document.querySelector('.btn800');
    
        // 封装定时器函数
        function animate(obj, target) {
            // 解决多次点击按钮事件触发定时器效果的叠加bug问题,在每次定时器触发之前先关闭定时器
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                // 移动距离变速减速
                var x = (target - obj.offsetLeft) / 10;
                // 三元表达式由target - obj.offsetLeft
                // 根据盒子正向移动还是反向移动进行取整
                x = x > 0 ? Math.ceil(x) : Math.floor(x);
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer);
                }
                else {
                    obj.style.left = obj.offsetLeft + x + 'px';
                }
    
            }, 50);
        }
    
    
        btn800.addEventListener('click', function () {
            animate(div, 800);
    
        })
    
    
        btn500.addEventListener('click', function () {
            animate(div, 500);
    
        })
    </script>
    
  • 相关阅读:
    ASP.Net Core MVC+Ajax 跨域
    ASP.Net Core MVC 发生二次请求
    Spire高效稳定的.NET组件
    ASP.Net Core Razor+AdminLTE 小试牛刀
    二维码神器QRCoder
    读入 并查集 gcd/exgcd 高精度 快速幂
    Codeforces 348 D
    Gym
    BZOJ 3894 文理分科 最小割
    BZOJ 2132 圈地计划 最小割
  • 原文地址:https://www.cnblogs.com/xjt31/p/13055471.html
Copyright © 2011-2022 走看看