原生js仿jquery animate动画效果_

1、原生js仿jquery animate动画效果_ 这篇文章主要为大家具体介绍了原生js仿jquery animate动画效果，具有肯定的，感爱好的小伙伴们可以参考一下 代码如下: !DOCTYPE html html lang=en head meta charset=UTF-8 title动画/title style *margin:0;padding:0; .boxwidth: 400px;height: 300px;background: #000;margin:40px auto;color: #fff;font-size: 18px;text-align: center; /styl

2、e script /猎取对象样式规章信息，IE下用法currentStyle function getStyle(obj,style) return obj.currentStyle?obj.currentStylestyle:getComputedStyle(obj,false)style; /原生js动画类似jquery-animate function animate(obj,styleJson,callback) clearInterval(obj.timer); / 开启定时器 obj.timer=setInterval(function() var flag=true;/假设全部动

3、作都已完成成立。 for(var styleName in styleJson) /1.取当前属性值 var iMov=0; / 透亮度是小数，所以得单独处理 iMov=styleName=opacity?Math.round(parseFloat(getStyle(obj,styleName)*100):parseInt(getStyle(obj,styleName); /2.计算速度 var speed=0; speed=(styleJsonstyleName-iMov)/8;/缓冲处理，这边也可以是固定值 speed=speed0?Math.ceil(speed):Math.floor(

4、speed);/区分透亮度及小数点，向上取整，向下取整 /3.推断是否到达预定值 if(styleJsonstyleName!=iMov) flag=false; if(styleName=opacity)/推断结果是否为透亮度 obj.stylestyleName=(iMov+speed)/100; obj.style.filter=alpha(opacity:+(iMov+speed)+); else obj.stylestyleName=iMov+speed+px; if(flag)/到达设定值，停止定时器，执行回调 clearInterval(obj.timer); if(callba

5、ck)callback(); ,30) window.onload=function() document.getElementById(box).onclick=function() var oThis=this; animate(oThis,width:500,function() animate(oThis,height:400,function()alert(宽度高度都增加了); ); /script /head body div class=box id=box点击效果：宽度增加-高度增加-弹出框/div /body /html 留意点 1.动画前要先停止原来的定时器，不然绑定多个对

6、象的话会冲突 2.定时器的id要区分开，不能重叠，这里我挺直那绑定对象的 对象来赋值 obj.timer 3.要推断所要执行的动画，是否全部到了设定值= flag，全部执行完再停止定时器再执行回调函数 4.javascript的数据类型转换问题 alert(0.07*100); /弹出7.000000000000001 留意：Javascript在存储时并不区分number和float类型，而是统一按float存储。而javascript用法IEEE 754-2021 标准定义的64bit浮点格式存储number，根据IEEE 754的定义： decimal64对应的整形部分长度为 10,小数部分长度为16，所以默认的计算结果为“7.0000000000000001”，如最终一个小数为0，则取1作为有效数字标记。 5.传入的json数据不能带px，例如width:300px，为了兼容透亮度的数值，没想到好的处理方式，有没有大神指导下. 6.该定时器做了缓冲处理，改变越来越慢，想要快速的效果或者匀速的效果，只需要在2.计算速度那块做下处理就可以 7.不兼容css3的属性,只兼