Js万能运动框架
2017-04-08 17:58
260 查看
最近在用H5的项目,关于运动的js代码用到很多,写了一份简单的运动框架,供大家使用,只需要导入即可,调用方法就可以实现简单的运动
/** * Created by ios1 on 17/4/8. */ function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return window.getComputedStyle(obj,false)[attr]; } } function startMove(obj,json,Func) { clearInterval(obj.timer); obj.timer = setInterval(function () { var stop=true; for (var attr in json){ var currentAttr = 0; if(attr == 'opacity'){ currentAttr = Math.round(parseFloat(getStyle(obj,attr))*100); }else{ currentAttr = parseInt(getStyle(obj,attr)); } var speed = (json[attr] - currentAttr)/5; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(json[attr] != currentAttr) stop = false; if(attr =='opacity'){ obj.style.opacity = (currentAttr + speed)/100; obj.style.filter = 'alpha(opacity:'+(currentAttr + speed)+')' }else{ obj.style[attr] = currentAttr + speed +'px'; } } if (stop){ clearInterval(obj.timer); if(Func)Func(); } },30); }
相关文章推荐
- 万能JS运动框架
- [js运动动画]运动之匀速运动框架
- js-多物体运动框架
- js-完美物体运动框架
- JS - 弹性运动完美框架
- js完美运动框架最终版
- JS运动框架
- JS运动基础框架实例分析
- js简单运动框架--1 单属性运动
- js之运动框架缓冲运动
- 原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
- 自己实现js运动框架的一些心得
- JS简易运动框架
- 运动框架改进之完美运动框架 -纯js
- js运动技术--链式运动框架
- js运动技术--完美运动框架
- (42)JS运动之多物体框架--多个div变宽
- js中的运动框架(缓冲运动)
- js完美多物体运动框架(缓冲运动)
- js运动框架完美运动框架2--这个才有效