js运动

js运动

匀速运动

function stratMove(dom, target){
    var timer = null;
    clearInterval(timer);
    var iSpeed = target - dom.offsetLeft > 0 ? 7 : -7;
    dom.timer = setInterval(function(){
        if(Math.abs(target - dom.offsetLeft) < Math.abs(iSpeed)) {
            clearInterval(dom.timer);
            dom.style.left  = target + 'px';
        }else{
            dom.style.left = dom.offsetLeft + iSpeed + 'px';
        }
    },30)
}

缓冲运动

function startMove(dom, target){
    var  dom.timer = null;
    clearInterval(timer);
    var iSpeed = null;
    dom.timer = setInterval(function(){
        iSpeed = (target - odiv.offsetLeft) / 7;
                                //向上取整个         像下取整
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
       if(dom.offsetLeft == target){
           clearInterval(dom.timer)
       }else{
           dom.style.left = dom.offsetLeft + iSpeed +'px';
       }
    },30)
}

获取属性样式

function getStyle (don, attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(dom, null)[attr];
    }else{
        return dom.currentStyle[attr];
    }
}

透明度

function startMove(dom, target){
    clearInterval(timer);
    var iSpeed = null, iCur = null;
    dom.timer = setInterval(function (){
        iCur = parseFloat( getStyle(dom, 'opacity') ) * 100;
        iSpeed = (target - iCur) / 7;
        console.log(iSpeed)
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
        if ( iCur == target){
            clearInterval(dom.timer)
        }else{
            dom.style.opacity = (iCur + iSpeed) / 100;
        }
    },30)
}

多物体值运动

function startMove(dom, attr, target){
    clearInterval(dom.timer);
    var iSpeed = null, iCur = null;
    dom.timer = setInterval(function (){
        if (attr == 'opacity'){
            iCur = parseFloat(getStyle(dom, attr) ) * 100
        }else{
            iCur = parseFloat(getStyle(dom, attr));
        }
        iSpeed = (target - iCur) / 7;
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
        if (iCur == target) {
            clearInterval(dom.timer);
        }
        if( attr == 'opacity'){
            dom.style.opacity = (iCur + iSpeed) / 100;
        }else{
            dom.style[attr] = iCur + iSpeed + 'px'
        }
    }, 30)
}

多物体多值 + 回调函数

            //    元素   想要改变的属性的值对象方式传入       回调函数
function startMove(dom, attrObj, callback) {
      清除定时器，元素的定时器
    clearInterval(dom.timer);
    // 初始变量       
    var iSpeed = null, iCur = null;
              定时器
    dom.timer = setInterval(function () {
          //判断所有定时器是否执行完初始化变量
        var bStop = true;
        //循环传入的attrObj里面有多少属性和值
        for (var attr in attrObj) {
            // 判断当前传入的属性是否是透明度
            if (attr == 'opacity') {
                //如果是透明让iCur得到经过计算后的值
                       //              当前的透明属性值 * 100
                iCur = parseFloat(getStyle(dom, attr)) * 100
            } else {
                //不是就让iCur得到普通属性的值
                iCur = parseFloat(getStyle(dom, attr));
            }
            //让iSpeed等于 传入参数的属性值减去 得到iCur的值 / 7 
            //缓冲运动
            iSpeed = (attrObj[attr] - iCur) / 7;
            //iSeed  判断，如果iSpeed> 0 就向下取整，  不小于就 向上取整
            iSpeed = iSpeed > 0 ?  Math.ceil(iSpeed) : Math.floor(iSpeed);
            //如果属性是透明
            if(attr == 'opacity'){
                //元素的透明值就等于 当前的值 + 取整后的值 /100
                dom.style.opacity = (iCur + iSpeed) / 100;
            }else{
                //元素的属性值就等于 当前的值 + 取整后的值 + px
                dom.style[attr] = iCur + iSpeed + 'px'
            }
            // 如果所有定时器都执行完了，判断当前的属性值是否不与传入的属性值相等
            if( iCur != attrObj[attr]){
                //没执行完就会一直执行
                bStop = false;
            }
        }
        //如果执行完之后bStop就会执行最后代码
        if(bStop) {
            //清楚所有的定时器
            clearInterval(dom.timer);
            //判断传入的最后参数是不是函数，如果是，就执行该函数
            typeof callback == 'function' && callback()
        }
    }, 30)
}