js运动框架

js的运动框架

. 第一次写博客希望谅解 js的运动框架其实就是对于元素的位置的改变
1：理解style和offsetstyle的区别
2：Json和fon in的运用
3：数学知识的理解
4：对定时器的理解和运用

js代码

function getStyle(obj,name)
   {
    //解决兼容性问题，对于js中的原生库里面的理解，获取属性
    if(obj.currentStyle)
    {
     return obj.currentStyle[name];
    }
    else
    {
     return getComputedStyle(obj,false)[name];
    }
   }
//添加一个函数参数让能够实现多个物体变化
//利用json进行多参数传输
//for in 的运用
function Move(obj,Json,Funsan)
 {
    //清除之前的定时器，避免产生抖动的影响
    clearInterval(obj.timer);
    obj.timer=setInterval(function()
    {
     for(var attr in Json)
     {
      var cur=0;
      //获取样式时需要考虑为透明度的问题
      if(attr=='opacity')
      {
        //获取盒子的透明度的大小,利用math.round进行取整
       cur=Math.round(parseFloat(getStyle(obj,attr))*100);
       //console.log('cur:'+cur);
      }
      else
      {
       cur=parseInt(getStyle(obj,attr));
      }
       //设置变化的速度的大小
      var speed=(Json[attr]-cur)/6;
      //速度进行取整操作，上取整和下取整
      speed=speed>0?Math.ceil(speed):Math.floor(speed);
      if(cur==Json[attr])
      {
	       clearInterval(obj.timer);
	       //编写其他函数的格式
	       if(Funsan)
	       {
	           Funan;
	       }
	 }
      else
      {
       if(attr=='opacity')
       {
        //console.log(speed);
        obj.style.filter='alpha(opcity:'+(cur+speed)+')';
        obj.style.opacity=(cur+speed)/100;
        //document.getElementById('txt1').value=obj.style.opacity;
       }
       
      
       else
       {
         obj.style[attr]=cur+speed+'px';
         //console.log(obj.alpha);
       }
      
      }
     }
    },30)
   }

其实运动框架就是对于循环的使用，学会简化代码，将代码进行封装是我们必须学习的一部分
框架还是不完整
当出现多个值需要改变时会出现问题
做法用一个布尔类型的值用于判断所有的是否都达到了目标点
然后在进行定时器的删除