JS完美运动框架
大家好 我是过往云烟 这几天写了一个 JS运动框架,基本上和JQ封装好的动画方法类似 可以改变透明度 高度宽度 字体大小 等等 很多值,原生态JS写的 而且还支持回调函数,可谓是功能应有尽有啊
下面是框架的源码
function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer=setInterval(function (){ var bStop=true; //这一次运动就结束了——所有的值都到达了 for(var attr in json) { //1.取当前的值 var iCur=0; if(attr=='opacity') { iCur=parseInt(parseFloat(getStyle(obj, attr))*100); } else { iCur=parseInt(getStyle(obj, attr)); } //2.算速度 var iSpeed=(json[attr]-iCur)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //3.检测停止 if(iCur!=json[attr]) { bStop=false; } if(attr=='opacity') { obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')'; obj.style.opacity=(iCur+iSpeed)/100; } else { obj.style[attr]=iCur+iSpeed+'px'; } } if(bStop) { clearInterval(obj.timer); if(fn) { fn(); } } }, 30) }
调用的话 就直接把这2个函数放到一个JS文件里面 第一个函数是获取样式的 第二个函数是运动框架本身 获取样式 是JSON格式 比如要改变一个DIV的宽度 可以这样写
startMove('div',{width:100});
如果改变多个值可以这样
startMove('div',{width:100,height:200});
同时还支持链式运动
startMove(div,{width:100,height:100},function(){
startMove(div,{opacity:20});
});
这样就可以 先改变高度宽度 然后在改变透明度