这篇文章主要介绍“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;
/* transition: 3s; */
}
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运动函数怎么用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
