一.doMove函数封装 抖原理 透明度封装

doMove()

window.onload=function(){ 
    var oBtn1 = document.getElementById("btn1");
    var oDiv = document.getElementById("div1");
   oBtn1.onclick=function(){
       doMove(oDiv,'top',5,400,function(){
           doMove(oDiv,'left',3,800);
       });
   }
    oDiv.timer=null;
    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();
                }

            },10);
    }
    function getStyle(obj,attr){return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];}
}

<small>

• 大概逻辑
• doMove(对象,样式属性,步长,目标值,回调函数)
• 判断步长 如果小于目标值 则为正数,否则为负值
• 使用之前先停止定时器 (为了防止每次点击的时候 定时器在原有的基础之上重复执行)
• 设置定时器函数 获取现有的样式属性值加上步长
• 判断 如果速度大于目标值切步长为正数 或者 速度小于目标值且步长为负数 让速度等于相对应的目标值(加上步长判断为了防止点击反方向按钮 一次性回归原位)
• 然后直接将速度值赋给对象的style
• 最后判断: 如果速度值等于目标值,停止定时器; 与此同时 如果有回掉函数,就执行
  </small>

抖动原理及实现过程

window.onload=function(){
    var oImg=document.getElementById('img1');
    oImg.onclick=function(){
            var pos=parseInt(getStyle(oImg,'left'));
            var arr=[];
            var timer=null;
            var num=0;
            for(var i=20;i>0;i-=5){
                arr.push(i,-i);
            }
            arr.push(0);
           clearInterval(timer);
           timer=setInterval(function(){
               oImg.style.left=pos+arr[num]+"px";
               num++;
               if(num==arr.length){
                   clearInterval(timer)
               }
           },50);
    }
}

<small>

• 抖动原理
• 首先要有属性样式设定
• 获取样式属性值
• 定义一个空数组
• 定义一个空的定时器变量
• 定义一个num为0
• 遍历抖动最大数值 从大到小 到0为止数值差自己设定 在遍历过程中将i 压入数组中
• 遍历结束 在arr数组中补0
• 先清空定时器
• 开启定时器 设置对象样式为原位置一一加上数组中的数值
• num++推动着 (定时器每隔固定时间 就执行一次++)
• 知道num的数值等于数组的长度 停止定时器
  </small>

抖的函数封装

shake(oImg,'top');
function shake(obj,attr,endFn){
    var pos=parseInt(getStyle(obj,attr));
    var arr=[];
    var num=0;
    for(var i=20;i>0;i-=5){arr.push(i,-i);  }
    arr.push(0);
    clearInterval(obj.time);
    obj.time=setInterval(function(){
        obj.style[attr]=pos+arr[num]+"px";
        num++;
        if(num==arr.length){
            clearInterval(obj.time);
            endFn&&endFn();
        }
    },50);
}

透明度的封装

function opacity(obj, num, target, endFn) {
    
        num = getStyle(obj, 'opacity')*100 < target ? num : -num;
        
        clearInterval( obj.opacity );
        
        obj.opacity = setInterval(function () {
            
            var speed = parseInt(getStyle(obj, 'opacity')*100) + num;
            
            if ( speed > target && num > 0 || speed < target && num < 0 ) {
                speed = target;
            }
            
            obj.style.opacity = speed/100;
            obj.style.filter = 'alpha(opacity='+ speed +')';
            
            if ( speed == target ) {
                clearInterval( obj.opacity );
                endFn && endFn();
            }

        }, 20);
}