1、运动函数
考虑一下问题:有一目标处于left值为10px位置处,需要运动到left位1000px位置处。
var oDiv = document.getElementById('div1');
var timer = null;
timer = setInterval(function(){
oDiv.style.left = parseInt(getStyle(oDiv, 'left')) + 10 + 'px';
if( parseInt(getStyle(oDiv, 'left'))>=1000 ){
clearInterval(timer);
oDiv.style.left = 1000 + 'px';
}
},30)
为了防止到达目标点后的抖动幅度过大问题,可以将目标点判断放在外面:
var oDiv = document.getElementById('div1');
var timer = null;
timer = setInterval(function(){
var iSpeed = parseInt(getStyle(oDiv, 'left')) + 10;
if(iSpeed>=1000){
iSpeed = 1000;
}
oDiv.style.left = iSpeed + 'px';
if ( ispeed == 1000 ) {
clearInterval(timer );
}
},30)
为了后续封装函数的方便,避免全局变量,可以将定时器设为自定义属性管理:
var oDiv = document.getElementById('div1');
oDiv.timer = setInterval(function(){
var iSpeed = parseInt(getStyle(oDiv, 'left')) + 10;
if(iSpeed>=1000){
iSpeed = 1000;
}
oDiv.style.left = iSpeed + 'px';
if ( ispeed == 1000 ) {
clearInterval( oDiv.timer );
}
},30)
接下来对函数进行抽象:
需要考虑改变的因素有目标体、目标点、变化属性、变化速度,已经到达目标值得后续操作(回调函数)
function doMove ( obj, attr, dir, target, endFn ) {
dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir; //判断方向
clearInterval( obj.timer );
obj.timer = setInterval(function () {
var speed = parseInt(getStyle( obj, attr )) + dir; // 步长
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);
}
2、抖动函数
function shake ( obj, attr, endFn ) {
var pos = parseInt( getStyle(obj, attr) );
var arr = []; // 20, -20, 18, -18 ..... 0
var num = 0;
for ( var i=20; i>0; i-=2 ) {
arr.push( i, -i );
}
arr.push(0);
clearInterval( obj.shake );
obj.shake = setInterval(function (){
obj.style[attr] = pos + arr[num] + 'px';
num++;
if ( num === arr.length ) {
clearInterval( obj.shake );
endFn && endFn();
}
}, 50);
}