该运动框架可以用于改变宽度、高度、字体大小、透明度、Left、top等值
先上一个获取真正样式的函数
//定义getStyle函数,获取真正样式 function getStyle(obj,attr){ if(obj.currentStyle){//兼容IE return obj.currentStyle[attr]; }else if(window.getComputedStyle(obj,false)){//兼容FF return getComputedStyle(obj,false)[attr]; }; };
然后上都是主体部分:
//参数为对象,属性,目标值 function move(obj,json,fnEnd){ clearInterval(obj.timer); obj.timer = setInterval(startmove,30); function startmove(){ var bBtn = true; //定义开关,初始值为真,如果全部属性达到目标值,则清除定时器 for(var attr in json){ //循环json,处理没一个JSON属性值 var iSpeed,iCur=0; if(attr == "opacity"){ iCur = Math.round(parseFloat(getStyle(obj,attr)) * 100); // 如果传入的属性是透明度,则转换为百分制 }else{ iCur = Math.round(parseFloat(getStyle(obj,attr)));//获取当前属性的真正值 }; iSpeed = (json[attr] - iCur) / 8; iSpeed = (iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed)); // 当速度大于0是向上取整,小于0向下取整 if(iCur != json[attr]){ bBtn = false; } if(attr == "opacity"){ obj.style.opacity = (iCur + iSpeed)/100; obj.style.filter = "alpha(opacity:" + iCur + iSpeed + ")"; }else{ obj.style[attr] = iCur + iSpeed + "px"; }; }; if(bBtn){ clearInterval(obj.timer); if(fnEnd){ fnEnd.call(obj); }; }; }; };