元素移动,并设定速度、方向、最终位置、回调函数

function doMove ( obj, attr, dir, target, endFn ) {   //obj是元素、attr是方向(上下左右)、dir是速度的像素数值、target是目标位置的像素数值、endFn是回调函数
    
    dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;     //根据方向函数判断速度dir的正负,不用用户自己判断
    
    clearInterval( obj.timer );   //防止多次点击,点击前先清除!!!!!!必须
    
    obj.timer = setInterval(function () {  //每隔30毫秒位置变化一次
        
        var speed = parseInt(getStyle( obj, attr )) + dir;            // 原先的位置加上设定的速度,得到30毫秒后的位置
        
        if ( speed > target && dir > 0 ||  speed < target && dir < 0  ) {   //判断如果大于或小于给定的目标位置,就等于给定的位置不再动了
            speed = target;
        }
        
        obj.style[attr] = speed + 'px';   //把位置赋值给元素的属性
        
        if ( speed == target ) {   //如果等于目标位置,清除移动的函数
            clearInterval( obj.timer );
            
            endFn && endFn();   //如果回调函数存在,执行回调函数
            
        }
        
    }, 30);
}
//元素移动用到的获取元素属性的封装,例子二
function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }

封装后调用的写法:

doMove( aDiv,'top',23,500,function(){});
posted @ 2017-04-18 11:29  念念念不忘  阅读(313)  评论(0)    收藏  举报