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(對象,樣式屬性,步長,目標值,回調函數(shù))
• 判斷步長 如果小于目標值 則為正數(shù),否則為負值
• 使用之前先停止定時器 (為了防止每次點擊的時候 定時器在原有的基礎之上重復執(zhí)行)
• 設置定時器函數(shù) 獲取現(xiàn)有的樣式屬性值加上步長
• 判斷 如果速度大于目標值切步長為正數(shù) 或者 速度小于目標值且步長為負數(shù) 讓速度等于相對應的目標值(加上步長判斷為了防止點擊反方向按鈕 一次性回歸原位)
• 然后直接將速度值賦給對象的style
• 最后判斷: 如果速度值等于目標值,停止定時器; 與此同時 如果有回掉函數(shù),就執(zhí)行
  </small>

抖動原理及實現(xiàn)過程

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>

• 抖動原理
• 首先要有屬性樣式設定
• 獲取樣式屬性值
• 定義一個空數(shù)組
• 定義一個空的定時器變量
• 定義一個num為0
• 遍歷抖動最大數(shù)值 從大到小 到0為止數(shù)值差自己設定 在遍歷過程中將i 壓入數(shù)組中
• 遍歷結束 在arr數(shù)組中補0
• 先清空定時器
• 開啟定時器 設置對象樣式為原位置一一加上數(shù)組中的數(shù)值
• num++推動著 (定時器每隔固定時間 就執(zhí)行一次++)
• 知道num的數(shù)值等于數(shù)組的長度 停止定時器
  </small>

抖的函數(shù)封裝

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);
}