今天無事點開了N年未點開的慕課網，看了一個js動畫框架的視頻，心血來潮用jQuery的方法封裝了一下，雖然不如jQuery，但是還是有點點所獲。

什麽都不說，直接上代碼:

/**

 * 這是框架的唯一對象，使用jQuery框架的創建方法

 * @class MyAnimation

 * @constructor 

 */
function MyAnimation(Selector){
	//返回MyAnimation原型鏈中init()方法創建的對象
	return new MyAnimation.prototype.init(Selector); 
}

/**

 * 這是對象的初始化方法

 * @method init

 * @param {string} Selector 選擇對象
 
 * @return 

 */
function init(Selector){
  var el = null;
  var identifier = "(?:\\\\.|[\\w-]|[^\0-\\xa0])+";	
  var match = {
	"all": new RegExp( "^\\.(" + identifier + ")" )
  }; 		
	
  //匹配
  if(match["all"].exec(Selector) != null){
	  el = document.querySelectorAll(Selector);
  }else{
	  el = document.querySelector(Selector);
  }


 /**
  *	實現css樣式的改變

  * @method changeStyle

  * @for MyAnimation

  * @param {Object} obj 元素對象(帶timer)
   
  * @param {json} json json對象格式 --> {attr(String):String}(同時變化的屬性和值)
  
  * @param {function} callback 回調函數，用於鏈式動畫
  
  * @return {void}
  
  */
　　//jQuery --> animate
   this.changeStyle = function(obj, json, callback){
	 clearInterval(obj.timer);
	 var _this = this; //保存init()
	 //一個定時器監視所有屬性變化
	 obj.timer = setInterval(function(){
		 var flag = true; //判斷是否所以的運動都完成了
		 for(var attr in json){
			 //初始值
			var icur = 0;
			//判斷屬性，分別處理
			if(attr == "opacity"){
				//0.07 * 100 --> 7.000000001 --> round --> 7
				icur = Math.round(parseFloat(_this.getStyle(obj, attr)) * 100);
			}else{
				//console.log(_this);
				icur = parseInt(_this.getStyle(obj, attr));
			}
			//計算速度
			var speed = (json[attr] - icur) / 8;
			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
			/* 
			以下代碼是不對的，因為當有一個運動到達目標，就關閉了定時器
			if(icur == json[target]){
				clearInterval(timer);
			}
			*/
			//有運動未完成就會設置為false
			if(icur != json[attr]){
				flag = false;
			}
			if(icur == "opacity"){
				obj.style.filter = ‘alpha(opacity:‘+ icur + speed +‘)‘;
				obj.style.opacity = (icur + speed) / 100; 
			}else{
				obj.style[attr] = icur + speed + ‘px‘;
			}
		}
		//已經遍歷了attr，判斷是否所有運動都完成了
		if(flag){
			clearInterval(obj.timer);
			//回調
			if(callback){
				console.log(_this);
				callback(_this);
			}
		}
	 }, 30);	
 }
 /**
	
  * 獲取style屬性值
  
  * @method getStyle

  * @for MyAnimation  
  
  * @param {Object} obj 元素對象  
  
  * @param {String} attr 元素對象屬性值
  
  */
 this.getStyle = function(obj,attr){
	 if(obj.currentStyle){
		 return obj.currentStyle[attr];
	 }else{
		 return getComputedStyle(obj,false)[attr];
	 }
 }
}

MyAnimation.prototype.init = init;
//使init()創建的對象指向MyAnimation
MyAnimation.prototype.init.prototype = MyAnimation.prototype;

//創建一個名為MA的MyAnimation外部對象引用 
var MA = window.MyAnimation;　　

簡單模擬jQuery創建對象的方法，以及封裝一個js動畫框架