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>
    
  • 相关阅读:
    string基本字符系列容器(一)
    HDU 1541 star (树状数组)
    NKOI 1321--数列操作问题(裸BIT)
    树状数组(BIT)初学
    vector向量容器
    C++ STL概述
    2015年,为ACM奋斗的一年
    kuangbin带你飞,矩阵(简单数学推导题)
    hust 1009 Sum the K-th
    hust 1223 Friends
  • 原文地址:https://www.cnblogs.com/xjt31/p/13055471.html
Copyright © 2011-2022 走看看