JavaScript运动函数怎么用
导读：本文共1782.5字符，通常情况下阅读需要6分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 运动函数是我们自己封装的一个函数。作用是将css样式的改变不是一次性完成 是 逐步完成 执行效果 看上去 像是 动画/运动 完成的css样式改变。实际项目中框架等都有自己的运动函数我们目前封装一个简单的兼容多属性的运动函数。运动函数部分:<!DOCTYPEhtml><htmllang="en"><head&g... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。运动函数是我们自己封装的一个函数。
作用是将css样式的改变不是一次性完成 是 逐步完成 执行效果 看上去 像是 动画/运动 完成的css样式改变。
实际项目中框架等都有自己的运动函数我们目前封装一个简单的兼容多属性的运动函数。
运动函数部分:
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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:0auto;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>varoDiv=document.querySelector('div');varoBtn=document.querySelector('button');varoP=document.querySelector('p')oBtn.addEventListener('click',function(){move(oDiv,{width:1800,height:900,opacity:1},function(){oDiv.style.background='black'});})//运动函数命名//move运动函数//@paramobjectelement要执行运动函数的标签对象//@paramobjectobject要执行运动的css属性和最终数值//@paramfunctioncallback运动结束执行的回调函数//默认值是空函数functionmove(element,object,callback=function(){}){//定义变量存储定时器个数letnum=0;//循环遍历参数二(object)//使用for...in循环使用let定义变量for(lettypeinobject){//type是参数2对象的属性也就是要运动的css样式的属性//object[type]是参数2对象的属性值也就是要运动的css样式的最终数值//定时器数量加一num++;//开始数值，也就是获取的原始数值，兼容透明度写法letstartVal=(type==='opacity')?window.getComputedStyle(element)[type]*100:parseInt(window.getComputedStyle(element)[type]);//结束数值，也就是输入的属性对应的属性值，兼容透明度写法letendVal=(type==='opacity')?object[type]*100:object[type];//定时器开始，time记录定时器编号lettime=setInterval(function(){//设定步长值=结束数值-开始数值/10letstep=(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>运行结果：
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
JavaScript运动函数怎么用的详细内容，希望对您有所帮助，信息来源于网络。