摘要：動(dòng)畫(huà)函數(shù)封裝單物體運(yùn)動(dòng)對(duì)一個(gè)進(jìn)行寬高屬性的變化，對(duì)透明度屬性進(jìn)行變化。這里還要注意的是定時(shí)器不能共用，要多帶帶設(shè)置自己的定時(shí)器。具體學(xué)習(xí)視頻參考慕課網(wǎng)動(dòng)畫(huà)效果

對(duì)一個(gè)div進(jìn)行寬高屬性的變化，對(duì)透明度屬性進(jìn)行變化。

      *{margin: 0; padding: 0;}    /*樣式*/    
      
分享
 
    /*結(jié)構(gòu)*/       
      #parent {position: relative; width: 200px; height: 200px; background-color: #f00; margin-left: -200px;}
      #son {position: absolute; width: 30px; height: 50px; background-color: green; top: 50%; right:-30px; transform: translateY(-50%); text-align: center; }  
       window.onload=function(){ //首先加載函數(shù)在dom加載后
       var parent=document.getElementById("parent"); //獲得父級(jí)dom元素
       parent.onmousemove=function(){ //當(dāng)鼠標(biāo)在父級(jí)元素上移動(dòng)時(shí)，觸發(fā)事件
       move(10,0);    //move 函數(shù)對(duì)進(jìn)行處理
       }
       parent.onmouseout=function(){ //當(dāng)鼠標(biāo)離開(kāi)父級(jí)元素時(shí)，觸發(fā)事件
       move(-10,-200);    }}  
       var timer=null; 
       function move(speed,target){
       clearInterval(timer); //每次在進(jìn)入move之前都清除定時(shí)器
       var parent=document.getElementById("parent");
       timer=setInterval(function(){ //設(shè)置定時(shí)器
       if(parent.offsetLeft==target){ //假如滿(mǎn)足條件，清除定時(shí)器
       clearInterval(timer);
       }else{ //否則進(jìn)行進(jìn)一步處理
          parent.style.marginLeft=parent.offsetLeft+speed+"px";
            }
   },30);
   }   /*js代碼*/                                                                       

這里可能像我這樣的新手對(duì) parent.offsetLeft、marginLeft對(duì)這些屬性比較陌生，具體可以參考這篇文章 offsetLeft,有圖有真相。

透明度屬性的處理

   #opcity {width: 200px; height: 200px; background-color: #f00; filter: alpha(opacity=30); /*兼容IE9 以下*/opacity: 0.3; } /*樣式*/
   
 /*結(jié)構(gòu)*/
   window.onload=function(){
       var opcity=document.getElementById("opcity");
       opcity.onmousemove=function(){
       move(100);    
       }
       opcity.onmouseout=function(){
       move(30);    
       }
   }
   var timer=null;
   var op=30;
   function move(arg){
        clearInterval(timer);
        var opcity=document.getElementById("opcity");
        timer=setInterval(function(){
         var speed=0;
         if(op
這里的代碼基本和上面基本上是一樣的，主要是要對(duì) opacity進(jìn)行處理，這里在后面還有一種處理辦法，由于opacity 傳進(jìn)來(lái)是0.3這樣的小數(shù)，可以先用parseFloat()對(duì)opacity進(jìn)行處理，然后在乘以100使其變成一個(gè)整數(shù)，然后在進(jìn)行后面的處理。


js動(dòng)畫(huà)函數(shù)封裝--多物體運(yùn)動(dòng)
div {width: 400px; height: 200px; background-color: yellow; border: 2px solid #666; margin-bottom: 20px;} /*樣式*/


  /*結(jié)構(gòu)*/

window.onload=function(){
        var test= document.getElementById("test");
        var test1= document.getElementById("test1");
        test.timer=null;
        test1.timer=null;
        test.onmouseover=function(){
           move(this,"width",200);
        }
        test.onmouseout=function(){
           move(this,"width",400);
        }
        test1.onmouseover=function(){
           move(this,"height",400);
        }
        test1.onmouseout=function(){
           move(this,"height",200);
        }
    }
    function move(obj,attr,target){
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
        var pa=    parseInt(getStyle(obj,attr));    
         var speed=(target-pa)/8;
         speed=(speed>0)?Math.ceil(speed):Math.floor(speed);
             obj.style[attr]=pa+speed+"px";            
     },30);
    }
    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr]; /*IE 方法*/
        }else {
            return getComputedStyle(obj,false)[attr]; /*chrome ,ff*/
        }
    }  /*js代碼*/
這里新封裝一個(gè)函數(shù)，getStyle()用來(lái)獲取DOM元素樣式,對(duì)currentStyle和 getComputedStyle有疑問(wèn)的可以參考一下張?chǎng)涡翊笊竦倪@篇文章currentStyle getComputedStyle，到這一步開(kāi)始有進(jìn)一步對(duì)函數(shù)的封裝，記得開(kāi)始的時(shí)候單物體運(yùn)動(dòng)的時(shí)候，只有一個(gè)屬性，只需要傳一個(gè)參數(shù)，對(duì) opacity的處理大致也差不多，只是要多一點(diǎn)轉(zhuǎn)化，對(duì)于多物體運(yùn)動(dòng)，屬性的值是在變化的，而且test test1一個(gè)改變寬，一個(gè)改變高，所以可以對(duì)函數(shù)可以進(jìn)一步封裝，這里對(duì)于opacity處理是有問(wèn)題的，需要在函數(shù)內(nèi)部進(jìn)行判斷，選擇不同的分支。這里還要注意的是定時(shí)器不能共用，要多帶帶設(shè)置自己的定時(shí)器。

js動(dòng)畫(huà)函數(shù)封裝--緩沖運(yùn)動(dòng)
基本結(jié)構(gòu)和上面單物體結(jié)構(gòu)相同