运动

//obj 操作的元素

//json 参数为要操作的属性和目标值键--属性值--目标值

//callback 回调函数

var flag;//开关变量当值为true时，表示所有的动作都执行完毕，可以关掉定时器，也可以进入下一个动作

function startMove(obj,json,callback){//attr表示要操作的属性
        
    clearInterval(obj.timer);
    
    obj.timer = setInterval(function(){
        flag = true;
        
        var current = 0;
        
        for(var attr in json){
            
            if( attr =="opacity" ){//操作透明度
                //获取透明度的样式值
                current =parseFloat( getStyle(obj,attr) )*100;
                
            }else if( attr == "zIndex" ){
                current =parseInt( getStyle(obj,attr)  ) ;//接收当前元素的样式值
            }else{
                current =parseInt( getStyle(obj,attr)  ) ;//接收当前元素的样式值
            }
            
            
            var speed = (json[attr] - current)/10;
            
            
            speed = speed>0?Math.ceil(speed) : Math.floor(speed);
            
            
            if( current != json[attr] ){//动作完成后的条件  
                flag = false;//当目标值和当前的样式值 不相等时  ， 将开关变量值关闭 false
            }
                
            //定时器开启时  不停的改变元素的样式
            if( attr == "opacity" ){
                obj.style.opacity = (current+speed)/100;
            }else if( attr=="zIndex" ){
                obj.style.zIndex = json[attr];
            }else{
                obj.style[attr] = current + speed + "px";
            }
    
        }
        
        //循环结束后判断flag的值，当值为true时，表示 所有的动作都执行完毕 ，可以关掉定时器 ，也可以进入下一个动作
        if( flag ){
            clearInterval(obj.timer);
            //上一个动作完成后 就开启下一个动作的执行    调用callback
            //判断 callback是否存在 存在就调用
            if( callback ){
                callback();
            }
        }
        
    },30)
}

匀速运动---缓冲运动---多物体运动---链式运动---完美运动

匀速运动

速度不变：

注意：

1、频繁操作事件需要先将定时器清除处理防止加速运动

2、速度确定：不能由用户提供在函数体内部解决

目标值 - 运动物体的left值 > 0 ? 正速度 : 负速度

缓冲运动

缓冲运动：速度可变

原理：速度确定

var speed = (target - obj.offsetLeft)/10;

speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );

　　sport1.js:

//支持缓冲 + 多物体
// obj ：运动的对象
// attr : 运动的样式
// target ：目标值

function startMove(obj,attr,target){
clearInterval( obj.timer );
obj.timer = setInterval( function(){
var current = parseInt( getStyle( obj , attr ) );
var speed = (target - current)/10;
speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
if( target == current ){
clearInterval( obj.timer )
}else{
obj.style[attr] = current + speed + "px";
}
},30 )
}

sport2.js:

//支持缓冲 + 多物体
// obj ：运动的对象
// attr : 运动的样式
// target ：目标值

function startMove(obj,attr,target){
clearInterval( obj.timer );
obj.timer = setInterval( function(){
//获取实际样式值
var current = 0;
if( attr == "opacity" ){
current = getStyle( obj , attr )*100;
}else{
current = parseInt( getStyle( obj , attr ) );
}
//获取速度
var speed = (target - current)/10;
speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
//判断结束条件 并设置样式
if( target == current ){
clearInterval( obj.timer )
}else{
if( attr == "opacity" ){
obj.style[attr] = (current + speed)/100;
}else{
obj.style[attr] = current + speed + "px";
}
}
},30 )
}

sport3.js:

//支持缓冲 + 多物体
// obj ：运动的对象
// attr : 运动的样式
// target ：目标值
//callback ：代表一个功能一个函数当一个函数作为参数时，这样的函数叫做回调函数
//回调：回头再调用

function startMove(obj,attr,target,callback){
clearInterval( obj.timer );
obj.timer = setInterval( function(){
//获取实际样式值
var current = 0;
if( attr == "opacity" ){
current = getStyle( obj , attr )*100;
}else{
current = parseInt( getStyle( obj , attr ) );
}
//获取速度
var speed = (target - current)/10;
speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
//判断结束条件 并设置样式
if( target == current ){
clearInterval( obj.timer );
//上一个动作完成了 开始进入到下一个动作
//下一个动作不确定 此处有一个功能 是可变的
if( callback ){//如果用户传递了该参数 就执行下一个动作
callback();
}
}else{
if( attr == "opacity" ){
obj.style[attr] = (current + speed)/100;
}else{
obj.style[attr] = current + speed + "px";
}
}
},30 )
}