JS封装简单的运动框架

266 阅读1分钟

封装一个运动框架的函数,可以实现某个元素以某种速度,往某个方向的移动

代码:

/*** 
 * 先封装一个获取元素样式的函数,用于获取非行间样式
 * 考虑到IE的兼容性问题所以需要封装此函数
 * @param obj 获取页面中具体的某一个元素 例如,p,div,li... 
 * @param attr 自定义的属性名,表示的是上面的obj元素中的具体的某一个属性
 * 例如:width、height、top、left....
 */
 
 function getStyle(obj,attr){
     if(obj.currentStyle){
     //IE低版本
         return obj.currenStyle[attr];
     }else{
     //标准浏览器
         return getComputedStyle(obj)[attr];
     }
 }


/***
 * 封装一个运动框架函数
 * @param obj 具体运动的是哪一个元素,例如:div、p、ul...
 * @param attr 具体的某一种属性 例如:top、left、opacity。。。
 * @param step 运动的步长
 * @param target 运动的目标值
 */
 var timer = null ;
function move(obj,tag,step,target){
    //先清除之前的定时器,清楚产出的id值
    clearInterval(timer);
    //判断运动的方向
    step = target > parseInt(getStyle(obj,attr)) ? step : -step ; 
    //定时器
    timer = setInterval(function(){
        //初始位置 + 运动步长 = 运动过程
        var left = parseInt(getStyle(obj,attr)) + step ;
        //判断到达目标值时停止运动
        if(left >= target && step > 0 || left <= arget && step < 0){
        left = target ; 
        //停止计时器
        clearInterval(timer) ;
    }
    obj.style[attr] = left + "px" ;
    },20)
    
}