API之封装动画函数

步骤

  1. 获取所需要的页面元素
  2. 给按钮注册点击事件,写出事件函数,事件函数里面调用封装的动画函数
  3. 封装动画函数
    • 明确动画函数有两个参数,一个参数是运动的对象,另一个函数是目标距离
    • 首先先清理一次定时器(否则会不受控制)
    • 获取传入对象的当前位置
    • 定义一个变量记录每次对象移动多少距离
    • 如果传入对象的当前距离小于目标距离则走正数,否则走负数
    • 确定每次移动后的距离
    • 判断传入对象是否到达目标位置,如果目标距离-当前距离的绝对值 > 每次要移动的距离的绝对值,那么传入对象正常移动,否则清理定时器,直接到达目标位置
  • 对象要移动就要脱离文档流
  • ** 如果样式的代码在style标签内设置,那么外面就无法获取到他的值,所以需要用offset来获取**
  • 如果样式的代码在标签的属性里设置,那么它就可以被获取

详细代码

<body>
        <input type="button" value="移动到400px" id="btn1">
        <input type="button" value="移动到800px" id="btn2">
        <div id="box"></div>
        <script>
          
            var btn1 = document.getElementById('btn1');
            var btn2 = document.getElementById('btn2');
            var box = document.getElementById('box');
            
            btn1.onclick = function () {
                 animation(box, 400);
            }
    
            btn2.onclick = function () {
                 animation(box, 800);
            }
            function animation (element, target) {
                //先清理定时器
                clearInterval(element.timeId);
                element.timeId = setInterval (function() {
                    //获取div当前位置,
                    var current = element.offsetLeft;//数据类型,没有px
                    // div 每次移动多少像素
                    var step = 10;
                    //当前位置小于目标位置,走正数,否则走负数
                    step = current < target ? step : -step;
                    //每次移动后的距离
                    current += step;
                    //判断当前位置是否到达目标位置
                    if(Math.abs(target - current) > Math.abs(step)) {
                        element.style.left = current + 'px';
                    }else {
                        clearInterval(timeId);
                        //最后一次剩余要走的步数小于每次要走的步数,那么直接到达终点
                        element.style.left = target + 'px';
                    }
                },20);
            }
        </script>
    </body>

API之封装动画函数

上一篇:实验十二:SWING界面设计


下一篇:【Elasticsearch Postman版】完全匹配(精准匹配)