js运动框架
最近写个运动框架,确实好用,来附上,具体就不说了,注释比较详细
简洁版:包括链式运动,没有同时运动,不需要json格式
//获取非行间样式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr] } else{ return getComputedStyle(obj,false)[attr] } } //startMove运动函数 fn为链式运动 function startMove(obj,attr,target,fn){ clearInterval(obj.timer) obj.timer=setInterval(function(){ var getCur=0 if(attr=='opacity'){ //兼容透明度 getCur=Math.round(parseFloat(getStyle(obj,attr))*100) } else{ getCur=parseInt(getStyle(obj,attr)) } var speed=(target-getCur)/8 //缓动运动 speed=speed>0?Math.ceil(speed):Math.floor(speed) if(getCur==target){ clearInterval(obj.timer) if(fn){ fn.call(obj) //回调函数作用域指向obj } }else{ if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(getCur+speed)+')' obj.style.opacity=(getCur+speed)/100 }else{ obj.style[attr]=getCur+speed+'px' } } },30) }
完整版:包括链式运动、同时运动,涉及到同时运动则需要利用json辅助完成
//获取非行间样式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr] } else{ return getComputedStyle(obj,false)[attr] } } //startMove运动函数 fn为链式运动 json for in 循环 function startMove(obj,json,fn){ clearInterval(obj.timer) obj.timer=setInterval(function(){ var flag=true //设置一个标签 for(var attr in json){ var getCur=0 if(attr=='opacity'){ //兼容透明度 getCur=Math.round(parseFloat(getStyle(obj,attr))*100) } else{ getCur=parseInt(getStyle(obj,attr)) } var speed=(json[attr]-getCur)/8 //缓动运动 speed=speed>0?Math.ceil(speed):Math.floor(speed) if(getCur!=json[attr]){ //判断标签 要的是最后的值 flag=false } if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(getCur+speed)+')' obj.style.opacity=(getCur+speed)/100 }else{ obj.style[attr]=getCur+speed+'px' } } if(flag){ //判断标签 设置在for in外面意思是for in到全部的attr才执行接下操作 clearInterval(obj.timer) if(fn){ fn.call(obj) //回调函数作用域指向obj } } },30) }
需要注意的几点
获取非行间样式,注意浏览器的兼容问题
常用的Math方法、parseInt等的转换
回调函数,作用域的问题
json格式