欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js运动框架

程序员文章站 2022-03-27 09:36:41
...

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)
   }

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

相关标签: js运动框架