通过改变属性实现动画
时间：2023-04-03 00:10:25
HTML
今天的文章主要介绍js如何通过改变属性实现动画效果，比如通过定时器快速改变width、height、left、top等属性，从而实现HTML页面上图形的均匀运动。现在有这样一个需求，定义两个背景颜色不同的对象。单击该按钮时，它将以恒定的速度向左和向下移动。关键语法：1.获取当前dom的指定属性值//兼容IE}}这个方法定义的目的是获取dom属性的值，例如：dom:'
'，调用这个方法computedStyle(dom,'宽度')返回30。2.定时器，返回这个定时器的唯一idtimerId=setInterval(function(){},1000);这个定时器的主要目的是匀速改变dom属性的值例子：#box{width:100px;高度：100px；背景：红色；位置：绝对；/*getComputedStyle方法将属性左侧的值'left'取为800*/left:800px;顶部：50px；}#box1{宽度：100px；高度：100px；背景：蓝色；位置：绝对；左：900px；顶部：50px；}
box box1 //封装获取id的方法function$(id){returndocument.getElementById(id);}//获取计算属性attr='width'functioncomputedStyle(dom,attr){if(getComputedStyle){returngetComputedStyle(dom,'')[attr]}else{returndom.currentStyle()[属性]}}window.onload=function(){varbtn=$('按钮');varbox=$('box');varbox1=$('box1');btn.onclick=function(){animate(box,'left',100);动画（box1，“顶部”，400）；}functionanimate(dom,attr,target){//多个元素一起移动，每个元素绑定一个属性放当前移动定时器dom.timer=setInterval(function(){varcurrent=parseInt(computedStyle(dom,attr));varstep=(target>current)?1:-1;/*target大于当前值+1target小于当前值-1*/if(target==current){//如果是等于100，exit也是定时器退出的条件dom.style[attr]=target+'px';clearInterval(dom.timer);返回假；}//改变位置dom.style[attr]=(current+step)+'px';//改变样式的属性实现动画},10)//每10毫秒改变一次}}
