简单模拟jQuery创建对象的方法，以及封装一个js动画框架

/** * 这是框架的唯一对象，使用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 --> 7icur = 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);}*///有运动未完成就会设置为falseif(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()创建的对象指向MyAnimationMyAnimation.prototype.init.prototype = MyAnimation.prototype;//创建一个名为MA的MyAnimation外部对象引用 var MA = window.MyAnimation;