JavaScript运动函数怎么用

2023-06-29 03:06:18 256人浏览薄情痞子

摘要

这篇文章主要介绍“javascript运动函数怎么用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JavaScript运动函数怎么用”文章能帮助大家解决问题。运动函数是我们自己封装的一个函数。作用是

这篇文章主要介绍“javascript运动函数怎么用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JavaScript运动函数怎么用”文章能帮助大家解决问题。

运动函数是我们自己封装的一个函数。

作用是将CSS样式的改变不是一次性完成是逐步完成执行效果看上去像是动画/运动完成的css样式改变。

实际项目中框架等都有自己的运动函数我们目前封装一个简单的兼容多属性的运动函数。

运动函数部分:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta Http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        * {            margin: 0;            padding: 0;        }        div {            width: 100px;            height: 100px;            background: rgb(231, 12, 48);            margin: 0 auto;            opacity: 0.3;                    }        p {            width: 100px;            height: 100px;            background: black;            position: fixed;            top: 200px;            left: 50px;        }    </style></head><body>    <button>点击</button>    <div></div>    <script>        var oDiv = document.querySelector('div');        var oBtn = document.querySelector('button');        var oP = document.querySelector('p')           oBtn.addEventListener('click',function(){            move(oDiv,{width:1800,height:900,opacity:1} , function(){ oDiv.style.background = 'black' } );        })        // 运动函数命名        //     move    运动函数        // @param  object  element 要执行运动函数的标签对象        // @param  object  object  要执行运动的css属性 和 最终数值        // @param  function    callback    运动结束执行的回调函数        //                                 默认值是空函数        function move(element, object, callback = function () { }) {            // 定义变量存储定时器个数            let num = 0;            // 循环遍历参数二(object)            // 使用 for...in 循环 使用 let 定义变量             for (let type in object){                // type 是 参数2对象的属性 也就是 要运动的css样式的属性                // object[type] 是 参数2对象的属性值 也就是 要运动的css样式的 最终数值                // 定时器数量加一                num++;                // 开始数值，也就是获取的原始数值，兼容透明度写法                let startVal = (type === 'opacity') ? window.getComputedStyle(element)[type] * 100 : parseInt(window.getComputedStyle(element)[type]);                // 结束数值，也就是输入的属性对应的属性值，兼容透明度写法                let endVal = (type === 'opacity') ? object[type] * 100 : object[type];                // 定时器开始，time记录定时器编号                let time = setInterval( function () {                    // 设定步长值= 结束数值 - 开始数值  /  10                     let step = (endVal - startVal) / 10;                    // 如果步长值大于0 就向上取整，反之则向下取整                    step = step > 0 ? Math.ceil(step) : Math.floor(step);                    // 将初始值 += 步长值 再把新值赋值给初始值                    startVal += step;                    // 将新的步长值 赋值给 标签对象的css样式 兼容 透明度                    element.style[type] = (type === 'opacity') ? startVal / 100 : startVal + 'px';                    // 如果初始值等于最终值                    if (startVal === endVal) {                        // 清除定时器                        clearInterval(time);                        // 变量 累减1 也就是 少了一个执行的定时器                        // num--;                        // 当执行的定时器为0 时，所有定时器都清除了                        if (num === 0) {                            callback();                        }                    }                }, 20)            }        }    </script></body></html>

运行结果：

JavaScript运动函数怎么用