DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 原生js仿jquery animate動畫效果
原生js仿jquery animate動畫效果
編輯:關於JavaScript     

jquery animate動畫效果:

 

代碼

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>動畫</title>
 <style>
  *{margin:0;padding:0;}
  .box{width: 400px;height: 300px;background: #000;margin:40px auto;color: #fff;font-size: 18px;text-align: center;}
 </style>
 <script>
 //獲取對象樣式規則信息,IE下使用currentStyle
 function getStyle(obj,style){
  return obj.currentStyle?obj.currentStyle[style]:getComputedStyle(obj,false)[style];
 }
 //原生js動畫類似jquery--animate
 function animate(obj,styleJson,callback){
  clearInterval(obj.timer);
  // 開啟定時器
  obj.timer=setInterval(function(){
   var flag=true;//假設所有動作都已完成成立。
   for(var styleName in styleJson){
    //1.取當前屬性值
    var iMov=0;
    // 透明度是小數,所以得單獨處理
    iMov=styleName=='opacity'?Math.round(parseFloat(getStyle(obj,styleName))*100):parseInt(getStyle(obj,styleName));

    //2.計算速度
    var speed=0;
    speed=(styleJson[styleName]-iMov)/8;//緩沖處理,這邊也可以是固定值
    speed=speed>0?Math.ceil(speed):Math.floor(speed);//區分透明度及小數點,向上取整,向下取整
    
    //3.判斷是否到達預定值
    if(styleJson[styleName]!=iMov){
     flag=false;
     if(styleName=='opacity'){//判斷結果是否為透明度
      obj.style[styleName]=(iMov+speed)/100;
      obj.style.filter='alpha(opacity:'+(iMov+speed)+')';
     }else{
      obj.style[styleName]=iMov+speed+'px';
     }
    }
   }
   if(flag){//到達設定值,停止定時器,執行回調
    clearInterval(obj.timer);
    if(callback){callback();}
   }
  },30)
 }
 window.onload=function(){
  document.getElementById('box').onclick=function(){
   var oThis=this;
   animate(oThis,{'width':'500'},function(){
    animate(oThis,{'height':'400'},function(){alert('寬度高度都增加了')});
   });
  }
  
 }
 
 </script>
</head>
<body>
 <div class="box" id="box">點擊效果:寬度增加->高度增加->彈出框</div>
</body>
</html> 

注意點
 1.動畫前要先停止原來的定時器,不然綁定多個對象的話會沖突
 2.定時器的id要區分開,不能重疊,這裡我直接那綁定對象的 對象來賦值  obj.timer
 3.要判斷所要執行的動畫,是否全部到了設定值=> flag,全部執行完再停止定時器再執行回調函數
 4.javascript的數據類型轉換問題
alert(0.07*100);
//彈出7.000000000000001
注意:Javascript在存儲時並不區分number和float類型,而是統一按float存儲。而javascript使用IEEE 754-2008 標准定義的64bit浮點格式存儲number,按照IEEE 754的定義:
 decimal64對應的整形部分長度為 10,小數部分長度為16,所以默認的計算結果為“7.0000000000000001”,如最後一個小數為0,則取1作為有效數字標志。
 5.傳入的json數據不能帶px,例如{'width':'300px'},為了兼容透明度的數值,沒想到好的處理方式,有沒有大神指導下...
 6.該定時器做了緩沖處理,變化越來越慢,想要快速的效果或者勻速的效果,只需要在2.計算速度那塊做下處理就可以
 7.不兼容css3的屬性,只兼容了(width,height,top,left,right,bottom,opacity)
 8.獲取對象樣式的信息,要判斷IE或者火狐浏覽器,區別對待

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved