运动框架

function getStyle(obj, attr){
 if(obj.currentStyle){
  return obj.currentStyle[attr];
 }
 else{
  return getComputedStyle(obj, false)[attr];
 }
}//获取样式

function startMove(obj, json, fn){
/*obj 进行运动的节点
 
json 要进行哪些运动 如:{width:300,height:200}{opacity:100} 300 、200为目标点
 
fu 运动结束后进行的 操作 如 :运动结束后出现一个弹窗什么的*/

clearInterval(obj.timer);
 obj.timer=setInterval(function (){
  var bStop=true;  //这一次运动就结束了――所有的值都到达了
  for(var attr in json) {
 var iCur=0;//1.取当前的值
     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)
}

注意事项:对运动框架进行调用时一定要设初值。

例:starMove(oDiv,{left:500});时,需要在css样式中的div设定left的值。

你可能感兴趣的:(框架)