obj.currentStyle[name] 与 getComputedStyle(obj,false)[name],一个是支持IE 一个支持FE
完美运动js插件,能根据传进来的值,进行匹配,从而得到了理想的运动效果,也就是运行逻辑。
实现上下动画动画效果就是控制元素height的值,通过不断的修改该值,就能呈现所谓的动画效果,这里就需要用到定时器
定时器有两种
重复不断的定时器 setInterval(fn,time);
延时只在设定时间后只出现一次的定时器 setTimeout(fn,time)
在遍历传进的每一个值,需要使用一个boolean来控制是否完成解析,解析成功则返回true,结束定时器,返回false,知道返回true位置
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
}
function startMove(obj,json,fnEnd){
if(obj.timer){
clearInterval(obj.timer);
};
obj.timer=setInterval(function(){
var bStop = true; //假设全部找到
for(var attr in json){
var icurr = 0;
if(attr=='opacity'){
//匹配key
icurr=Math.round(parseFloat(getStyle(obj,attr))*100); //获取元素的属性值
}else{
icurr=parseInt(getStyle(obj,attr));
};
var sPeed = (json[attr]-icurr)/8;
sPeed=sPeed>0?Math.ceil(sPeed):Math.floor(sPeed);
if(attr=='opacity'){
obj.style.filter="alpha(opacity:"+(icurr+sPeed)+