前言：

        本人纯小白一个，有很多地方理解的没有各位大牛那么透彻，如有错误，请各位大牛指出斧正！小弟感激不尽。

        本篇文章为您分析一下原生JS写 匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动

        层层深入，到封装插件

基本功能：

  • 补充:

  • 补充中......

HTML结构【匀速运动】


    <div id="div"></div>
    <button id="btn">run</button>

CSS样式【匀速运动】


        #oDiv {
            width: 100px;
            height: 100px;
            background-color: burlywood;
            position: absolute;
            left: 0px;
            top: 0px;
            margin-top: 20px;
        }

        #btn {
            margin-top: 150px;
        }

JS行为【匀速运动】

大致原理
  1. 使用定时器让某个元素一直运动


        var oDiv = document.getElementById('oDiv');
        var oBtn = document.getElementById('btn');
        oBtn.onclick = function () {
            // 默认运动的速度
            var iSpeed = 4;
            // 开启定时器
            setInterval(function () {
                // 当前元素的最新的left值 = 当前的left值 + 速度 + 像素
                oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
            }, 30);
        }
当我们点击按钮时 页面效果如下:

但是当我们连续点击按钮时 页面效果如下:

当我们连续点击按钮时 它会越来越快？
当你点击按钮时它会多次触发函数
当它多次触发这个函数，它就会多次启动定时器
因此我们需要设置定时器的id并伺机清除定时器 

        var oDiv = document.getElementById('oDiv');
        var oBtn = document.getElementById('btn');
        // 定义一个定时器的ID
        var timer = null;
        oBtn.onclick = function () {
            // 每次点击时，清空定时器
            clearInterval(timer);
            // 默认运动的速度
            var iSpeed = 4;
            // 开启定时器
            timer = setInterval(function () {
                // 当前元素的最新的left值 = 当前的left值 + 速度 + 像素
                oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
            }, 30);
        }
页面效果如下:

当然，在页面中能动起来还不行，如果无法停止，那么用户体验也会非常的糟糕
因此，我们要让它到达某一个距离是可以停止运动
在 HTML结构 中添加一个span元素，并设置它的样式 
    <!-- HTML结构 -->
    <div id="oDiv"></div>
    <span></span>
    <button id="btn">JS匀速运动</button>

    <!-- CSS样式 -->
            span {
            position: absolute;
            left: 400px;
            top: 0;
            margin-top: 20px;
            width: 1px;
            height: 100px;
            background-color: black;
        }
页面效果如下:

为了让它到达目标点后停止
我们需要在定时器里时刻监听他的值 

        var oDiv = document.getElementById('oDiv');
        var oBtn = document.getElementById('btn');
        // 定义一个定时器的ID
        var timer = null;
        oBtn.onclick = function () {
            // 每次点击时，清空定时器
            clearInterval(timer);
            // 默认运动的速度
            var iSpeed = 4;
            // 开启定时器
            timer = setInterval(function () {
                // 每隔30毫秒执行这个函数，那么我们在这里判断当前位置是否到达目标点了
                if(oDiv.offsetLeft == 400){
                    // 清空定时器
                    clearInterval(timer);
                }else {
                    // 当前元素的最新的left值 = 当前的left值 + 速度 + 像素
                    oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
                }
            }, 30);
        }
页面效果如下:

此时看上去他是稳稳的停在了横线上
但是当我们把iSpeed改为7呢？
看如下效果图:

此时它并不会停在目标点上，而是直接越过去了
原因也很简单，因为7不是400的倍数
速度不停不停的去加，如果当前的位置距离目标点小于我一次走的距离的话（再加一次就越过去的时候）我就让它停止(清空定时器)
但是停止(清空定时器)之后，不是还差一点点吗？我们就让它等于目标点的距离(视觉上没有差别) 

        var oDiv = document.getElementById('oDiv');
        var oBtn = document.getElementById('btn');
        // 定义一个定时器的ID
        var timer = null;
        oBtn.onclick = function () {
            // 每次点击时，清空定时器
            clearInterval(timer);
            // 默认运动的速度
            var iSpeed = 7;
            // 开启定时器
            timer = setInterval(function () {
                // 每隔30毫秒执行这个函数，那么我们在这里判断当前位置是否到达目标点了
                // 目标点的距离 - 运动的总距离 < 速度
                if(400 - oDiv.offsetLeft < iSpeed){
                    // 清空定时器
                    clearInterval(timer);
                    // 并设置当前的left值
                    oDiv.style.left = '400px';
                }else {
                    // 当前元素的最新的left值 = 当前的left值 + 速度 + 像素
                    oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
                }
            }, 30);
        }
页面效果如下:

匀速运动的效果基本完成，这是从左向右运动
我们再扩展一下从右向左也可以正常的运动
让 #oDiv 的 left 值变成 800 看看
相应的速度也要发生变化 

        var oDiv = document.getElementById('oDiv');
        var oBtn = document.getElementById('btn');
        // 定义一个定时器的ID
        var timer = null;
        oBtn.onclick = function () {
            // 每次点击时，清空定时器
            clearInterval(timer);
            // 默认运动的速度 判断移动的速度是正数还是负数  目标值 - 当前值 > 0 它的速度是正值否则为负值
            var iSpeed = 400 - oDiv.offsetLeft > 0 ? 7 : -7;
            // 开启定时器
            timer = setInterval(function () {
                // 每隔30毫秒执行这个函数，那么我们在这里判断当前位置是否到达目标点了
                // 目标点的距离 - 运动的总距离 < 速度
                if (400 - oDiv.offsetLeft < iSpeed) {
                    // 清空定时器
                    clearInterval(timer);
                    // 并设置当前的left值
                    oDiv.style.left = '400px';
                } else {
                    // 当前元素的最新的left值 = 当前的left值 + 速度 + 像素
                    oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
                }
            }, 30);
        }

我们发现它并不是缓缓的移动而是瞬间就到达了目标点
关键就在于判断停止时(清空定时器)时的正负号
因此，我们应该在判断停止时(清空定时器)不考虑他们的正负号 

        var oDiv = document.getElementById('oDiv');
        var oBtn = document.getElementById('btn');
        // 定义一个定时器的ID
        var timer = null;
        oBtn.onclick = function () {
            // 每次点击时，清空定时器
            clearInterval(timer);
            // 默认运动的速度 判断移动的速度是正数还是负数  目标值 - 当前值 > 0 它的速度是正值否则为负值
            var iSpeed = 400 - oDiv.offsetLeft > 0 ? 7 : -7;
            // 开启定时器
            timer = setInterval(function () {
                // 每隔30毫秒执行这个函数，那么我们在这里判断当前位置是否到达目标点了
                // 绝对值 目标点的距离 - 运动的总距离 < 绝对值 速度
                if (Math.abs(400 - oDiv.offsetLeft) < Math.abs(iSpeed)) {
                    // 清空定时器
                    clearInterval(timer);
                    // 并设置当前的left值
                    oDiv.style.left = '400px';
                } else {
                    // 当前元素的最新的left值 = 当前的left值 + 速度 + 像素
                    oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
                }
            }, 30);
        }
页面效果如下:

这样我们就把JS的匀速运动效果完成了
下面提供插件版源码

JS匀速运动 （插件版）


        /**
         * 匀速运动
         * @param {*} dom 运动DOM元素
         * @param { Number } target 运动到的目标点
         * @param { Number } speed 运动的速度
         */
        var timer = null;
        function startMove(dom, target, speed) {
            clearInterval(timer);
            // 设置速度 判断目标值 - 当前的left
            var iSpeed = target - dom.offsetLeft > 0 ? speed : -speed;
            timer = setInterval(function () {
                if (Math.abs(target - dom.offsetLeft) < Math.abs(iSpeed)) {
                    dom.style.left = target + 'px';
                    clearInterval(timer);
                } else {
                    // dom的最新的left值 = 当前的left + 速度
                    dom.style.left = dom.offsetLeft + iSpeed + 'px';
                }
            }, 30);
        }

        // 这样使用
        oBtn.onclick = function () {
            startMove(oDiv, 400, 7);
        }

HTML结构【缓冲运动】

速度在逐渐减小的运动，物体的速度，距离目标点越近就越小，当到达目标点时，速度为0

    <!-- HTML结构 -->
    <div id="oDiv"></div>
    <span></span>
    <button id="btn">JS缓冲运动</button>

CSS样式【缓冲运动】


        #oDiv {
            width: 100px;
            height: 100px;
            background-color: burlywood;
            position: absolute;
            left: 800px;
            top: 0px;
            margin-top: 20px;
        }

        #btn {
            margin-top: 150px;
        }

        span {
            position: absolute;
            left: 400px;
            top: 0;
            margin-top: 20px;
            width: 1px;
            height: 100px;
            background-color: black;
        }

JS行为【缓冲运动】

        var oDiv = document.getElementById('oDiv');
        var oBtn = document.getElementById('btn');
        oBtn.onclick = function () {
            startMove(oDiv, 400);
        }
        // 定义一个定时器的ID
        var timer = null;
        function startMove(dom, target) {
            // 每次点击时，清空定时器
            clearInterval(timer);
            // 默认运动的速度 我们让它一开始为空值
            var iSpeed = null
            // 开启定时器
            timer = setInterval(function () {
                // 第一步: 考虑如何能让这个速度距离目标点越近速度越小呢？
                // (当前点距离目标点更近一步,如果不考虑缓冲，直接赋值dom.style.left = dom.offsetLeft + iSpeed + 'px';它就直接完成了) 为了达到缓冲的效果，我们要让它除一个数，这个数随便你定
                iSpeed = parseInt(target - dom.offsetLeft) / 7;
                // 清空定时器
                // 每隔30毫秒执行这个函数，那么我们在这里判断当前位置是否到达目标点了
                // 绝对值 目标点的距离 - 运动的总距离 < 绝对值 速度
                if (dom.offsetLeft == target) {
                    clearInterval(timer);
                } else {
                    // 当前元素的最新的left值 = 当前的left值 + 速度 + 像素
                    dom.style.left = dom.offsetLeft + iSpeed + 'px';
                }
            }, 30);
        }
页面效果如下:

在定时器中打印iSpeed看看

会发现它并没有完全到达目标点就停止了总是会差那么几像素

行间样式像素的小数会被忽略
我们要对它进行取整 

        // 定义一个定时器的ID
        var timer = null;
        function startMove(dom, target) {
            // 每次点击时，清空定时器
            clearInterval(timer);
            // 默认运动的速度 我们让它一开始为空值
            var iSpeed = null
            // 开启定时器
            timer = setInterval(function () {
                // 第一步: 考虑如何能让这个速度距离目标点越近速度越小呢？
                // (当前点距离目标点更近一步,如果不考虑缓冲，直接赋值dom.style.left = dom.offsetLeft + iSpeed + 'px';它就直接完成了) 为了达到缓冲的效果，我们要让它除一个数，这个数随便你定
                iSpeed = parseInt(target - dom.offsetLeft) / 7;
                console.log(iSpeed);
                // 第二步: 判断速度的正负值
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                // 清空定时器
                // 每隔30毫秒执行这个函数，那么我们在这里判断当前位置是否到达目标点了
                // 第三步: 如果当前的距离等于了目标距离
                if (dom.offsetLeft == target) {
                    // 清空定时器 停止运动
                    clearInterval(timer);
                } else {
                    // 当前元素的最新的left值 = 当前的left值 + 速度 + 像素
                    dom.style.left = dom.offsetLeft + iSpeed + 'px';
                }
            }, 30);
        }
页面效果如下:

下面我们利用缓冲运动实现一个小Demo

HTML结构


    <div class="wrapper">
        <span></span>
    </div>

CSS样式


        .wrapper {
            width: 400px;
            height: 80px;
            background-color: blue;
            position: absolute;
            left: -400px;
            top: 200px;
            cursor: pointer;
        }

        .wrapper span {
            width: 50px;
            height: 80px;
            background-color: burlywood;
            position: absolute;
            right: -50px;
            top: 0px;
        }

JS行为


        var oDiv = document.querySelector('.wrapper');
        var timer = null;
        oDiv.onmouseenter = function () {
            startMove(this, 0);
        }
        oDiv.onmouseleave = function () {
            startMove(this, -400);
        }

        function startMove(dom, target) {
            clearInterval(timer);
            var iSpeed = null;
            timer = setInterval(function () {
                iSpeed = (target - dom.offsetLeft) / 7;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if (dom.offsetLeft == target) {
                    dom.style.left = target + 'px';
                    clearInterval(timer);
                } else {
                    dom.style.left = dom.offsetLeft + iSpeed + 'px';
                }
            }, 30);
        }
页面效果如下:

对于宽高位置的运动是完成了，但是还有透明度的运算没有实现
下面我们来实现以下透明度的运动方式

HTML结构【缓冲运动-----透明度】


    <!-- HTML结构 -->
    <div id="oDiv"></div>
    <span></span>
    <button id="btn">JS缓冲运动</button>

CSS样式【缓冲运动-----透明度】


        #oDiv {
            width: 100px;
            height: 100px;
            background-color: burlywood;
            position: absolute;
            left: 700px;
            top: 0px;
            margin-top: 20px;
            opacity: 1;
        }

        #btn {
            margin-top: 150px;
        }

        span {
            position: absolute;
            left: 400px;
            top: 0;
            margin-top: 20px;
            width: 1px;
            height: 100px;
            background-color: black;
        }

JS行为【缓冲运动-----透明度】

我们希望点击他是透明度从1变成0.5的缓冲效果

        var oDiv = document.getElementById('oDiv');
        var oBtn = document.getElementById('btn');
        oBtn.onclick = function () {
            startMove(oDiv, 0.5);
        }
        // 获取计算样式的方法
        function getStyle(dom, attr) {
            // 做兼容处理
            if (window.getComputedStyle) {
                // 通用版本    传null是不去获取伪类的样式
                return window.getComputedStyle(dom, null)[attr];
            } else {
                // 老版本的ie
                return dom.currentStyle[attr];
            }
        }
        var timer = null;
        function startMove(dom, target) {
            // 每次点击时，清空定时器
            clearInterval(timer);
            // 默认运动的速度 我们让它一开始为空值
            var iSpeed = null;
            // 第一步: 定义一个透明度当前值，默认为空值
            var iCur = null;
            // 开启定时器
            timer = setInterval(function () {
                // 第二步: 获取透明度值
                iCur = parseFloat(getStyle(dom, 'opacity'));
                // 第三步: 速度 = 目标值 - 透明度当前值 / 随机一个数
                iSpeed = (target - iCur) / 7;
                // 速度判断正负值
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                // 第四步: 如果当前透明度值 = 目标值
                if (iCur == target) {
                    // 清空定时器 停止运动
                    clearInterval(timer);
                } else {
                    // 第五步: 设置透明度 = 当前透明度 + 速度
                    dom.style.opacity = iCur + iSpeed;
                }
            }, 30);
        }
页面效果如下:

发现它会一闪一闪的
此时它的透明度不是0就是1
因此我们需要处理一下他的值 
                    // 第二步: 获取透明度值 扩大100倍
                    iCur = parseFloat(getStyle(dom, 'opacity')) * 100;

                    // 设置透明度 = 当前透明度 + 速度 缩小100倍
                    dom.style.opacity = (iCur + iSpeed) / 100;

                    oBtn.onclick = function () {
                        // 调用时也扩大100倍
                        startMove(oDiv, 50);
                    }
页面效果如下:

有了上面这些函数的基础之后
下面我们进一步开始封装一个未来可以重复使用的运动函数

HTML结构【多物体同一个值运动】


<br/>
   <div style="background-color: aqua";>
    页面效果如下:
   </div>
<br/>

![](https://img2020.cnblogs.com/blog/1910171/202004/1910171-20200428185800632-1482451854.png)

## JS行为【多物体同一个值运动】

```js

        // 循环绑定点击事件
        for (var i = 0; i < oDiv.length; i++) {
            // 移入事件
            oDiv[i].onmouseenter = function () {
                startMove(this, 400)
            }
            // 移出事件
            oDiv[i].onmouseleave = function () {
                startMove(this, 100)
            }
        }

        // 获取计算样式的方法
        function getStyle(dom, attr) {
            // 做兼容处理
            if (window.getComputedStyle) {
                // 通用版本    传null是不去获取伪类的样式
                return window.getComputedStyle(dom, null)[attr];
            } else {
                // 老版本的ie
                return dom.currentStyle[attr];
            }
        }
        var timer = null;
        function startMove(dom, target) {
            // 每次点击时，清空定时器
            clearInterval(timer);
            // 默认运动的速度 我们让它一开始为空值
            var iSpeed = null;
            // 定义一个透明度当前值，默认为空值
            var iCur = null;
            // 开启定时器
            timer = setInterval(function () {
                // 第一步: 获取宽度
                iCur = parseInt(getStyle(dom, 'width'));
                iSpeed = (target - iCur) / 7;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if (iCur == target) {
                    clearInterval(timer);
                } else {
                    // 第二步: 设置宽度
                    dom.style.width = iCur + iSpeed + 'px';
                }
            }, 30);
        }
页面效果如下:

但是当我们快速移入时

导致这个问题归根结底同一时间只能有一个定时器触发

我们给每一个定时器给一个自己的id 
// 添加dom.timer
clearInterval(dom.timer);
// 添加dom.timer
dom.timer = setInterval(function () {
                // 第一步: 获取宽度
                iCur = parseInt(getStyle(dom, 'width'));
                iSpeed = (target - iCur) / 7;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if (iCur == target) {
                    // 添加dom.timer
                    clearInterval(dom.timer);
                } else {
                    // 第二步: 设置宽度
                    dom.style.width = iCur + iSpeed + 'px';
                }
            }, 30);
页面效果如下:

如果我们上面的都完成了的话
下面我们再进行扩张
多物体不同值的运动

HTML结构【多物体不同值运动】

    <div></div>
    <div></div>
    <div></div>
    <div></div>

CSS样式【多物体不同值运动】


        div {
            width: 100px;
            height: 100px;
            background-color: red;
            opacity: 1;
            margin-bottom: 100px;
        }

JS行为【多物体不同值运动】


        var oDivArray = document.querySelectorAll('div');
        // var oDiv = document.getElementById('oDiv');
        // var oBtn = document.getElementById('btn');
        // oBtn.onclick = function () {
        //     // 调用时也扩大100倍
        //     startMove(oDiv, 50);
        // }

        oDivArray[0].onclick = function () {
            startMove(this, 'width', 400);
        }
        oDivArray[1].onclick = function () {
            startMove(this, 'height', 400);
        }
        oDivArray[2].onclick = function () {
            startMove(this, 'borderWidth', 40);
        }
        oDivArray[3].onclick = function () {
            startMove(this, 'opacity', 50);
        }

        // 获取计算样式的方法
        function getStyle(dom, attr) {
            // 做兼容处理
            if (window.getComputedStyle) {
                // 通用版本    传null是不去获取伪类的样式
                return window.getComputedStyle(dom, null)[attr];
            } else {
                // 老版本的ie
                return dom.currentStyle[attr];
            }
        }
        var timer = null;
        /**
        * 多物体不同值运动
        * @param {*} dom 运动DOM元素
        * @param {*} attr 属性
        * @param {Number} target 运动到的目标点
        */
        function startMove(dom, attr, target) {
            // 每次点击时，清空定时器
            clearInterval(dom.timer);
            // 默认运动的速度 我们让它一开始为空值
            var iSpeed = null;
            // 定义一个透明度当前值，默认为空值
            var iCur = null;
            // 开启定时器
            dom.timer = setInterval(function () {
                // 第一步: 判断如果是opacity
                if (attr == 'opacity') {
                    // 获取 opacity   parseFloat浮点 因为 透明度是 0 - 1 可以是0.1 ~ 1
                    iCur = parseFloat(getStyle(dom, attr)) * 100;
                } else {
                    // 获取  attr 的  parseInt  整数 0 ~ +∞
                    iCur = parseInt(getStyle(dom, attr))
                }
                iSpeed = (target - iCur) / 7;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if (iCur == target) {
                    clearInterval(dom.timer);
                }
                // 第二步: 判断如果是opacity
                if (attr == 'opacity') {
                    dom.style.opacity = (iCur + iSpeed) / 100;
                } else {
                    dom.style[attr] = iCur + iSpeed + 'px';
                }
            }, 30)
        }

如果我们上面的都完成了的话
下面我们再进行扩张
多物体多值的运动 + 回调机制

HTML结构【多物体多值的运动 + 回调机制】


    <div id="topDiv"></div>
    <div id="bottomDiv"></div>

CSS样式【多物体多值的运动 + 回调机制】


        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: red;
            opacity: 1;
        }

        #topDiv {
            top: 200px;
        }

        #buttomDiv {
            top: 400px;
        }

JS行为【多物体多值的运动 + 回调机制】


        // 获取计算样式的方法
        function getStyle(dom, attr) {
            // 做兼容处理
            if (window.getComputedStyle) {
                // 通用版本    传null是不去获取伪类的样式
                return window.getComputedStyle(dom, null)[attr];
            } else {
                // 老版本的ie
                return dom.currentStyle[attr];
            }
        }
        var timer = null;
        /**
        * 多物体多值的运动 + 回调机制
        * @param {*} dom 运动DOM元素
        * @param {*} attrObj 属性对象
        * @param {Number} target 运动到的目标点
        */
        function startMove(dom, attrObj, callback) {
            // 每次点击时，清空定时器
            clearInterval(dom.timer);
            // 默认运动的速度 我们让它一开始为空值
            var iSpeed = null;
            // 定义一个透明度当前值，默认为空值
            var iCur = null;
            // 开启定时器
            dom.timer = setInterval(function () {
                // 第四步: 定义一个锁，用来判断所有属性是否运动完，默认开启。
                var bStop = true;
                // 第一步: for in循环每一项
                for (var attr in attrObj) {
                    //判断如果是opacity
                    if (attr == 'opacity') {
                        // 获取 opacity   parseFloat浮点 因为 透明度是 0 - 1 可以是0.1 ~ 1
                        iCur = parseFloat(getStyle(dom, attr)) * 100;
                    } else {
                        // 获取  attr 的  parseInt  整数 0 ~ +∞
                        iCur = parseInt(getStyle(dom, attr));
                    }
                    // 第二步: 设置属性的速度
                    iSpeed = (attrObj[attr] - iCur) / 7;
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                    // 判断如果是opacity
                    if (attr == 'opacity') {
                        dom.style.opacity = (iCur + iSpeed) / 100;
                    } else {
                        // 第三步: 设置对应属性的值
                        dom.style[attr] = iCur + iSpeed + 'px';
                    }
                    // 第五步: 判断属性如果有 一项没有运动结束
                    if (iCur != attrObj[attr]) {
                        bStop = false;
                    }
                }
                // 第六步: 循环结束后判断bStop属性是否为开启状态
                if (bStop) {
                    // 清空定时器  停止运动
                    clearInterval(dom.timer);
                    callback();
                    // 第七步: 调用回调函数
                    typeof callback == 'function' && callback();
                    console.log('over');
                }
            }, 30);
        }

        // 调用时这样调用
        var oTopDiv = document.getElementById('topDiv');
        var oBottomDiv = document.getElementById('buttomDiv');
        oTopDiv.onclick = function () {
            startMove(this, { width: 400, height: 400, left: 200, top: 300, opacity: 50 }, function () {
                startMove(oBottomDiv, { width: 400, height: 400, left: 200, top: 300, opacity: 50 }, function () {
                    alert('over');
                })
            })
        }
页面效果如下:

这样我们的JS运动基本就封装完成了

结语

整完！！！

js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入的更多相关文章

  1. js 运动函数篇(二) （加速度运动、弹性运动、重力场运动（多方向+碰撞检测+重力加速度+能量损失运动）拖拽运动）层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写加速度运动.弹性运动.重力场运 ...

  2. JS里面的两种运动函数

    最新学了一个新的运动函数,与最初学习的有所不同,第一个运动是根据运动速度完成运动 ,第二个则是根据运动的时间来完成运动,而且把之前的函数都进行了一些兼容处理,在这里列出了看一下: 第一种animate ...

  3. 原生JS封装时间运动函数

    /*讲时间运动之前先给大家复习一下运动函数 通常大家都会写运动框架,一个定时器(Timer),一个步长(step 就是每次运动的距离),一个当前位置(current)一个目标位置(target),然后 ...

  4. 运动函数封装（js）

    // 运动函数 function starMove(obj,json,fnEnd){ clearInterval(obj.timer); obj.timer  = setInterval(functi ...

  5. JS错误记录 - 右侧悬浮框 - 缓冲运动

    本次练习错误总结: 1.  正确: startMove( document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); ...

  6. Javascript之封装运动函数

    @ 目录 阶段一.仅适用单位带px属性的匀速运动 阶段二.可适用单位不带px属性(如opacity)的匀速运动 阶段三.适用于多元素单一属性的匀速运动 阶段四.适用于多元素单一属性的匀速或缓冲运动 阶 ...

  7. 原生JavaScript运动功能系列（一）：运动功能剖析与匀速运动实现

    在我们日常生活中运动就是必不可少的部分,走路.跑步.打篮球等.在网页交互设计上运动也是必不可少的部分,创建的网站交互设计运动模块有轮播图,下拉菜单,还有各种炫酷的游戏效果都跟运动密切相关.所以很重要, ...

  8. JavaScript--封装好的运动函数+旋转木马例子

    封装好的运动函数: 1.能控制目标元素的多种属性 2.能自动获取元素的样式表: 3.获取样式函数兼容 4.能对于元素的多属性进行动画(缓动动画)修改 5.能区分透明度等没单位的属性和px属性的变化 a ...

  9. JS对象继承篇

    JS对象继承篇 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 原型链 其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法 function Person() ...

随机推荐

  1. A 现代艺术

    时间限制 : - MS   空间限制 : 165536 KB  评测说明 : 1s 问题描述 何老板是一个现代派的艺术家.他在一块由n*n的方格构成的画布上作画.一开始,所有格子里的数字都是0.何老板 ...

  2. Let‘s play computer game（最短路 + dfs找出所有确定长度的最短路）

    Let's play computer game Description xxxxxxxxx在疫情期间迷上了一款游戏,这个游戏一共有nnn个地点(编号为1--n1--n1--n),他每次从一个地点移动 ...

  3. 关于MySQL Notifiter的简单使用

    MySQL Notifiter是MySQL 数据库的辅助工具. 1.打开MySQL Notifiter Command Line Client,输入密码:123456(这是我自己的) 2.创建一个名为 ...

  4. 新建基于STM32F103ZET6的工程-寄存器版本

    1.新建空白工程 新建一个文件夹,用来存放新建的工程文件.在这个新建的文件夹下创建MDK-PRO和OUTPUT两个子文件夹.MDK-PRO文件夹用来存放工程文件:OUTPUT用来存放工程编译器后输出的 ...

  5. 1035 Password (20分)(水)

    To prepare for PAT, the judge sometimes has to generate random passwords for the users. The problem ...

  6. postman 参数传递

    pm.test("Status code is 200", function () { pm.response.to.have.status(200); }); pm.test(& ...

  7. javascript入门 之 bind()

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

  8. 二、Python2.7的安装并与Python3.8共存

    一:Python解释器为什么要2个版本? 众所周知,Python2.7是一个过渡版本. 很多公司写的项目并不是基于最新的Python3写的,在之后进行一些项目更改的时候,Python3的语法有一些并不 ...

  9. Java队列学习第一篇之列介绍

    Java并发之显式锁和隐式锁的区别 在面试的过程中有可能会问到:在Java并发编程中,锁有两种实现:使用隐式锁和使用显示锁分别是什么?两者的区别是什么?所谓的显式锁和隐式锁的区别也就是说说Synchr ...

  10. shell map数据结构的实现

    前言     Bash默认不支持二维数组,如果我们想实现map 数据结构,可以安装如下的方式来进行构造   预备知识     eval:  它是shell内建命令,用于字符串的解析.它会首先扫描命令行 ...