元素移动,并设定速度、方向、最终位置、回调函数
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(){});