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

原生JavaScript实现简单平移动画

程序员文章站 2022-03-04 14:10:39
...

1. 知识点 :

  • 计时器 (serInterval  &&  clearIntreval )
  • js获取到CSS样式 (getComputedStyle  &&  currentStyle )
  • 简单封装平移动画函数(function)

2.具体实现:

1).整体思路:

先获取到对象原来的值[W],定义一个目标值[T](即希望平移到的位置值),然后通过判断W和T的大小关系决定事增加还是减小其对应样式的值。

2).获取css样式的函数:

//获取css样式的函数
        function getStyle(obj,sty){
            if(window.getComputedStyle){
                return getComputedStyle(box,null)[sty];
            }else{
                return obj.currentStyle[sty];
            }
        }

3).比较T和W的大小关系

if(targetWidth > parseInt(w)){
            var move = setInterval(function(){
                x++;
                //设置停止增量
                if(x >= targetWidth - parseInt(w)){
                    clearInterval(move);
                    obj.style[sty] = targetWidth + 'px';
                }
                obj.style[sty] = parseInt(w) + x +'px';
            }, 30);
        }
        //如果target的值小于box的宽度
        else{
            var move = setInterval(function(){
                x++;
                //设置停止增量
                if(x >= parseInt(w) - targetWidth){
                    clearInterval(move);
                    obj.style[obj] = targetWidth + 'px';
                }
                obj.style[obj] = parseInt(w) - x +'px';
            }, 30);
        }
    }