用js完成blog项目

  1 //前台调用
  2 var $ = function (args) {
  3     return new Base(args);
  4 }
  5 
  6 //基础库
  7 function Base(args) {
  8     //创建一个数组,来保存获取的节点和节点数组
  9     this.elements = [];
 10     
 11     if (typeof args == 'string') {
 12         //css模拟
 13         if (args.indexOf(' ') != -1) {
 14             var elements = args.split(' ');            //把节点拆开分别保存到数组里
 15             var childElements = [];                    //存放临时节点对象的数组,解决被覆盖的问题
 16             var node = [];                                //用来存放父节点用的
 17             for (var i = 0; i < elements.length; i ++) {
 18                 if (node.length == 0) node.push(document);        //如果默认没有父节点,就把document放入
 19                 switch (elements[i].charAt(0)) {
 20                     case '#' :
 21                         childElements = [];                //清理掉临时节点,以便父节点失效,子节点有效
 22                         childElements.push(this.getId(elements[i].substring(1)));
 23                         node = childElements;        //保存父节点,因为childElements要清理,所以需要创建node数组
 24                         break;
 25                     case '.' : 
 26                         childElements = [];
 27                         for (var j = 0; j < node.length; j ++) {
 28                             var temps = this.getClass(elements[i].substring(1), node[j]);
 29                             for (var k = 0; k < temps.length; k ++) {
 30                                 childElements.push(temps[k]);
 31                             }
 32                         }
 33                         node = childElements;
 34                         break;
 35                     default : 
 36                         childElements = [];
 37                         for (var j = 0; j < node.length; j ++) {
 38                             var temps = this.getTagName(elements[i], node[j]);
 39                             for (var k = 0; k < temps.length; k ++) {
 40                                 childElements.push(temps[k]);
 41                             }
 42                         }
 43                         node = childElements;
 44                 }
 45             }
 46             this.elements = childElements;
 47         } else {
 48             //find模拟
 49             switch (args.charAt(0)) {
 50                 case '#' :
 51                     this.elements.push(this.getId(args.substring(1)));
 52                     break;
 53                 case '.' : 
 54                     this.elements = this.getClass(args.substring(1));
 55                     break;
 56                 default : 
 57                     this.elements = this.getTagName(args);
 58             }
 59         }
 60     } else if (typeof args == 'object') {
 61         if (args != undefined) {    //_this是一个对象,undefined也是一个对象,区别与typeof返回的带单引号的'undefined'
 62             this.elements[0] = args;
 63         }
 64     } else if (typeof args == 'function') {
 65         this.ready(args);
 66     }
 67 }
 68 
 69 //addDomLoaded
 70 Base.prototype.ready = function (fn) {
 71     addDomLoaded(fn);
 72 };
 73 
 74 //获取ID节点
 75 Base.prototype.getId = function (id) {
 76     return document.getElementById(id)
 77 };
 78 
 79 //获取元素节点数组
 80 Base.prototype.getTagName = function (tag, parentNode) {
 81     var node = null;
 82     var temps = [];
 83     if (parentNode != undefined) {
 84         node = parentNode;
 85     } else {
 86         node = document;
 87     }
 88     var tags = node.getElementsByTagName(tag);
 89     for (var i = 0; i < tags.length; i ++) {
 90         temps.push(tags[i]);
 91     }
 92     return temps;
 93 };
 94 
 95 //获取CLASS节点数组
 96 Base.prototype.getClass = function (className, parentNode) {
 97     var node = null;
 98     var temps = [];
 99     if (parentNode != undefined) {
100         node = parentNode;
101     } else {
102         node = document;
103     }
104     var all = node.getElementsByTagName('*');
105     for (var i = 0; i < all.length; i ++) {
106         if ((new RegExp('(\s|^)' +className +'(\s|$)')).test(all[i].className)) {
107             temps.push(all[i]);
108         }
109     }
110     return temps;
111 }
112 
113 //设置CSS选择器子节点
114 Base.prototype.find = function (str) {
115     var childElements = [];
116     for (var i = 0; i < this.elements.length; i ++) {
117         switch (str.charAt(0)) {
118             case '#' :
119                 childElements.push(this.getId(str.substring(1)));
120                 break;
121             case '.' : 
122                 var temps = this.getClass(str.substring(1), this.elements[i]);
123                 for (var j = 0; j < temps.length; j ++) {
124                     childElements.push(temps[j]);
125                 }
126                 break;
127             default : 
128                 var temps = this.getTagName(str, this.elements[i]);
129                 for (var j = 0; j < temps.length; j ++) {
130                     childElements.push(temps[j]);
131                 }
132         }
133     }
134     this.elements = childElements;
135     return this;
136 }
137 
138 //获取某一个节点,并返回这个节点对象
139 Base.prototype.ge = function (num) {    
140     return this.elements[num];
141 };
142 
143 //获取首个节点,并返回这个节点对象
144 Base.prototype.first = function () {
145     return this.elements[0];
146 };
147 
148 //获取末个节点,并返回这个节点对象
149 Base.prototype.last = function () {
150     return this.elements[this.elements.length - 1];
151 };
152 
153 //获取某组节点的数量
154 Base.prototype.length = function () {
155     return this.elements.length;
156 };
157 
158 //获取某一个节点的属性
159 Base.prototype.attr = function (attr, value) {
160     for (var i = 0; i < this.elements.length; i ++) {
161         if (arguments.length == 1) {
162             return this.elements[i].getAttribute(attr);
163         } else if (arguments.length == 2) {
164             this.elements[i].setAttribute(attr, value);
165         }
166     }
167     return this;
168 };
169 
170 //获取某一个节点在整个节点组中是第几个索引
171 Base.prototype.index = function () {
172     var children = this.elements[0].parentNode.children;
173     for (var i = 0; i < children.length; i ++) {
174         if (this.elements[0] == children[i]) return i;
175     }
176 };
177 
178 //设置某一个节点的透明度
179 Base.prototype.opacity = function (num) {
180     for (var i = 0; i < this.elements.length; i ++) {
181         this.elements[i].style.opacity = num / 100;
182         this.elements[i].style.filter = 'alpha(opacity=' + num + ')';
183     }
184     return this;
185 };
186 
187 //获取某一个节点,并且Base对象
188 Base.prototype.eq = function (num) {
189     var element = this.elements[num];
190     this.elements = [];
191     this.elements[0] = element;
192     return this;
193 };
194 
195 //获取当前节点的下一个元素节点
196 Base.prototype.next = function () {
197     for (var i = 0; i < this.elements.length; i ++) {
198         this.elements[i] = this.elements[i].nextSibling;
199         if (this.elements[i] == null) throw new Error('找不到下一个同级元素节点!');
200         if (this.elements[i].nodeType == 3) this.next();
201     }
202     return this;
203 };
204 
205 //获取当前节点的上一个元素节点
206 Base.prototype.prev = function () {
207     for (var i = 0; i < this.elements.length; i ++) {
208         this.elements[i] = this.elements[i].previousSibling;
209         if (this.elements[i] == null) throw new Error('找不到上一个同级元素节点!');
210         if (this.elements[i].nodeType == 3) this.prev();
211     }
212     return this;
213 };
214 
215 //设置CSS
216 Base.prototype.css = function (attr, value) {
217     for (var i = 0; i < this.elements.length; i ++) {
218         if (arguments.length == 1) {
219             return getStyle(this.elements[i], attr);
220         }
221         this.elements[i].style[attr] = value;
222     }
223     return this;
224 }
225 
226 //添加Class
227 Base.prototype.addClass = function (className) {
228     for (var i = 0; i < this.elements.length; i ++) {
229         if (!hasClass(this.elements[i], className)) {
230             this.elements[i].className += ' ' + className;
231         }
232     }
233     return this;
234 }
235 
236 //移除Class
237 Base.prototype.removeClass = function (className) {
238     for (var i = 0; i < this.elements.length; i ++) {
239         if (hasClass(this.elements[i], className)) {
240             this.elements[i].className = this.elements[i].className.replace(new RegExp('(\s|^)' +className +'(\s|$)'), ' ');
241         }
242     }
243     return this;
244 }
245 
246 //添加link或style的CSS规则
247 Base.prototype.addRule = function (num, selectorText, cssText, position) {
248     var sheet = document.styleSheets[num];
249     insertRule(sheet, selectorText, cssText, position);
250     return this;
251 }
252 
253 //移除link或style的CSS规则
254 Base.prototype.removeRule = function (num, index) {
255     var sheet = document.styleSheets[num];
256     deleteRule(sheet, index);
257     return this;
258 }
259 
260 //设置表单字段元素
261 Base.prototype.form = function (name) {
262     for (var i = 0; i < this.elements.length; i ++) {
263         this.elements[i] = this.elements[i][name];
264     }
265     return this;
266 };
267 
268 //设置表单字段内容获取
269 Base.prototype.value = function (str) {
270     for (var i = 0; i < this.elements.length; i ++) {
271         if (arguments.length == 0) {
272             return this.elements[i].value;
273         }
274         this.elements[i].value = str;
275     }
276     return this;
277 }
278 
279 //设置innerHTML
280 Base.prototype.html = function (str) {
281     for (var i = 0; i < this.elements.length; i ++) {
282         if (arguments.length == 0) {
283             return this.elements[i].innerHTML;
284         }
285         this.elements[i].innerHTML = str;
286     }
287     return this;
288 }
289 
290 //设置innerText
291 Base.prototype.text = function (str) {
292     for (var i = 0; i < this.elements.length; i ++) {
293         if (arguments.length == 0) {
294             return getInnerText(this.elements[i]);
295         }
296         setInnerText(this.elements[i], text);
297     }
298     return this;
299 }
300 
301 //设置事件发生器
302 Base.prototype.bind = function (event, fn) {
303     for (var i = 0; i < this.elements.length; i ++) {
304         addEvent(this.elements[i], event, fn);
305     }
306     return this;
307 };
308 
309 //设置鼠标移入移出方法
310 Base.prototype.hover = function (over, out) {
311     for (var i = 0; i < this.elements.length; i ++) {
312         addEvent(this.elements[i], 'mouseover', over);
313         addEvent(this.elements[i], 'mouseout', out);
314     }
315     return this;
316 };
317 
318 //设置点击切换方法
319 Base.prototype.toggle = function () {
320     for (var i = 0; i < this.elements.length; i ++) {
321         (function (element, args) {
322             var count = 0;
323             addEvent(element, 'click', function () {
324                 args[count++ % args.length].call(this);
325             });
326         })(this.elements[i], arguments);
327     }
328     return this;
329 };
330 
331 //设置显示
332 Base.prototype.show = function () {
333     for (var i = 0; i < this.elements.length; i ++) {
334         this.elements[i].style.display = 'block';
335     }
336     return this;
337 };
338 
339 //设置隐藏
340 Base.prototype.hide = function () {
341     for (var i = 0; i < this.elements.length; i ++) {
342         this.elements[i].style.display = 'none';
343     }
344     return this;
345 };
346 
347 //设置物体居中
348 Base.prototype.center = function (width, height) {
349     var top = (getInner().height - height) / 2 + getScroll().top;
350     var left = (getInner().width - width) / 2 + getScroll().left;
351     for (var i = 0; i < this.elements.length; i ++) {
352         this.elements[i].style.top = top + 'px';
353         this.elements[i].style.left = left + 'px';
354     }
355     return this;
356 };
357 
358 //锁屏功能
359 Base.prototype.lock = function () {
360     for (var i = 0; i < this.elements.length; i ++) {
361         fixedScroll.top = getScroll().top;
362         fixedScroll.left = getScroll().left;
363         this.elements[i].style.width = getInner().width + getScroll().left + 'px';
364         this.elements[i].style.height = getInner().height + getScroll().top + 'px';
365         this.elements[i].style.display = 'block';
366         parseFloat(sys.firefox) < 4 ? document.body.style.overflow = 'hidden' : document.documentElement.style.overflow = 'hidden';
367         addEvent(this.elements[i], 'mousedown', predef);
368         addEvent(this.elements[i], 'mouseup', predef);
369         addEvent(this.elements[i], 'selectstart', predef);
370         addEvent(window, 'scroll', fixedScroll);
371     }
372     return this;
373 };
374 
375 Base.prototype.unlock = function () {
376     for (var i = 0; i < this.elements.length; i ++) {
377         this.elements[i].style.display = 'none';
378         parseFloat(sys.firefox) < 4 ? document.body.style.overflow = 'auto' : document.documentElement.style.overflow = 'auto';
379         removeEvent(this.elements[i], 'mousedown', predef);
380         removeEvent(this.elements[i], 'mouseup', predef);
381         removeEvent(this.elements[i], 'selectstart', predef);
382         removeEvent(window, 'scroll', fixedScroll);
383     }
384     return this;
385 };
386 
387 //触发点击事件
388 Base.prototype.click = function (fn) {
389     for (var i = 0; i < this.elements.length; i ++) {
390         this.elements[i].onclick = fn;
391     }
392     return this;
393 };
394 
395 //触发浏览器窗口事件
396 Base.prototype.resize = function (fn) {
397     for (var i = 0; i < this.elements.length; i ++) {
398         var element = this.elements[i];
399         addEvent(window, 'resize', function () {
400             fn();
401             if (element.offsetLeft > getInner().width + getScroll().left - element.offsetWidth) {
402                 element.style.left = getInner().width + getScroll().left - element.offsetWidth + 'px';
403                 if (element.offsetLeft <= 0 + getScroll().left) {
404                     element.style.left = 0 + getScroll().left + 'px';
405                 }
406             }
407             if(element.offsetTop > getInner().height + getScroll().top - element.offsetHeight) {
408                 element.style.top = getInner().height + getScroll().top - element.offsetHeight + 'px';
409                 if (element.offsetTop <= 0 + getScroll().top) {
410                     element.style.top = 0 + getScroll().top + 'px';
411                 }
412             }
413         });
414     }
415     return this;
416 };
417 
418 //设置动画
419 Base.prototype.animate = function (obj) {
420     for (var i = 0; i < this.elements.length; i ++) {
421         var element = this.elements[i];
422         var attr = obj['attr'] == 'x' ? 'left' : obj['attr'] == 'y' ? 'top' : 
423                        obj['attr'] == 'w' ? 'width' : obj['attr'] == 'h' ? 'height' : 
424                        obj['attr'] == 'o' ? 'opacity' : obj['attr'] != undefined ? obj['attr'] : 'left';
425 
426         
427         var start = obj['start'] != undefined ? obj['start'] : 
428                         attr == 'opacity' ? parseFloat(getStyle(element, attr)) * 100 : 
429                                                    parseInt(getStyle(element, attr));
430         
431         var t = obj['t'] != undefined ? obj['t'] : 10;                                                //可选,默认10毫秒执行一次
432         var step = obj['step'] != undefined ? obj['step'] : 20;                                //可选,每次运行10像素
433         
434         var alter = obj['alter'];
435         var target = obj['target'];
436         var mul = obj['mul'];
437         
438         var speed = obj['speed'] != undefined ? obj['speed'] : 6;                            //可选,默认缓冲速度为6
439         var type = obj['type'] == 0 ? 'constant' : obj['type'] == 1 ? 'buffer' : 'buffer';        //可选,0表示匀速,1表示缓冲,默认缓冲
440         
441         
442         if (alter != undefined && target == undefined) {
443             target = alter + start;
444         } else if (alter == undefined && target == undefined && mul == undefined) {
445             throw new Error('alter增量或target目标量必须传一个!');
446         }
447         
448         
449         
450         if (start > target) step = -step;
451         
452         if (attr == 'opacity') {
453             element.style.opacity = parseInt(start) / 100;
454             element.style.filter = 'alpha(opacity=' + parseInt(start) +')';
455         } else {
456             //element.style[attr] = start + 'px';
457         }
458         
459         
460         if (mul == undefined) {
461             mul = {};
462             mul[attr] = target;
463         } 
464         
465 
466         clearInterval(element.timer);
467         element.timer = setInterval(function () {
468         
469             /*
470                 问题1:多个动画执行了多个列队动画,我们要求不管多少个动画只执行一个列队动画
471                 问题2:多个动画数值差别太大,导致动画无法执行到目标值,原因是定时器提前清理掉了
472                 
473                 解决1:不管多少个动画,只提供一次列队动画的机会
474                 解决2:多个动画按最后一个分动画执行完毕后再清理即可
475             */
476             
477             //创建一个布尔值,这个值可以了解多个动画是否全部执行完毕
478             var flag = true; //表示都执行完毕了
479             
480             
481             for (var i in mul) {
482                 attr = i == 'x' ? 'left' : i == 'y' ? 'top' : i == 'w' ? 'width' : i == 'h' ? 'height' : i == 'o' ? 'opacity' : i != undefined ? i : 'left';
483                 target = mul[i];
484                     
485 
486                 if (type == 'buffer') {
487                     step = attr == 'opacity' ? (target - parseFloat(getStyle(element, attr)) * 100) / speed :
488                                                          (target - parseInt(getStyle(element, attr))) / speed;
489                     step = step > 0 ? Math.ceil(step) : Math.floor(step);
490                 }
491                 
492                 
493                 
494                 if (attr == 'opacity') {
495                     if (step == 0) {
496                         setOpacity();
497                     } else if (step > 0 && Math.abs(parseFloat(getStyle(element, attr)) * 100 - target) <= step) {
498                         setOpacity();
499                     } else if (step < 0 && (parseFloat(getStyle(element, attr)) * 100 - target) <= Math.abs(step)) {
500                         setOpacity();
501                     } else {
502                         var temp = parseFloat(getStyle(element, attr)) * 100;
503                         element.style.opacity = parseInt(temp + step) / 100;
504                         element.style.filter = 'alpha(opacity=' + parseInt(temp + step) + ')';
505                     }
506                     
507                     if (parseInt(target) != parseInt(parseFloat(getStyle(element, attr)) * 100)) flag = false;
508 
509                 } else {
510                     if (step == 0) {
511                         setTarget();
512                     } else if (step > 0 && Math.abs(parseInt(getStyle(element, attr)) - target) <= step) {
513                         setTarget();
514                     } else if (step < 0 && (parseInt(getStyle(element, attr)) - target) <= Math.abs(step)) {
515                         setTarget();
516                     } else {
517                         element.style[attr] = parseInt(getStyle(element, attr)) + step + 'px';
518                     }
519                     
520                     if (parseInt(target) != parseInt(getStyle(element, attr))) flag = false;
521                 }
522                 
523                 //document.getElementById('test').innerHTML += i + '--' + parseInt(target) + '--' + parseInt(getStyle(element, attr)) + '--' + flag + '<br />';
524                 
525             }
526             
527             if (flag) {
528                 clearInterval(element.timer);
529                 if (obj.fn != undefined) obj.fn();
530             }
531                 
532         }, t);
533         
534         function setTarget() {
535             element.style[attr] = target + 'px';
536         }
537         
538         function setOpacity() {
539             element.style.opacity = parseInt(target) / 100;
540             element.style.filter = 'alpha(opacity=' + parseInt(target) + ')';
541         }
542     }
543     return this;
544 };
545 
546 //插件入口
547 Base.prototype.extend = function (name, fn) {
548     Base.prototype[name] = fn;
549 };
base.js
  1 //浏览器检测
  2 (function () {
  3     window.sys = {};
  4     var ua = navigator.userAgent.toLowerCase();    
  5     var s;        
  6     (s = ua.match(/msie ([d.]+)/)) ? sys.ie = s[1] :
  7     (s = ua.match(/firefox/([d.]+)/)) ? sys.firefox = s[1] :
  8     (s = ua.match(/chrome/([d.]+)/)) ? sys.chrome = s[1] : 
  9     (s = ua.match(/opera/.*version/([d.]+)/)) ? sys.opera = s[1] : 
 10     (s = ua.match(/version/([d.]+).*safari/)) ? sys.safari = s[1] : 0;
 11     
 12     if (/webkit/.test(ua)) sys.webkit = ua.match(/webkit/([d.]+)/)[1];
 13 })();
 14 
 15 //DOM加载
 16 function addDomLoaded(fn) {
 17     var isReady = false;
 18     var timer = null;
 19     function doReady() {
 20         if (timer) clearInterval(timer);
 21         if (isReady) return;
 22         isReady = true;
 23         fn();
 24     }
 25     
 26     if ((sys.opera && sys.opera < 9) || (sys.firefox && sys.firefox < 3) || (sys.webkit && sys.webkit < 525)) {
 27         //无论采用哪种,基本上用不着了
 28         /*timer = setInterval(function () {
 29             if (/loaded|complete/.test(document.readyState)) {     //loaded是部分加载,有可能只是DOM加载完毕,complete是完全加载,类似于onload
 30                 doReady();
 31             }
 32         }, 1);*/
 33 
 34         timer = setInterval(function () {
 35             if (document && document.getElementById && document.getElementsByTagName && document.body) {
 36                 doReady();
 37             }
 38         }, 1);
 39     } else if (document.addEventListener) {//W3C
 40         addEvent(document, 'DOMContentLoaded', function () {
 41             fn();
 42             removeEvent(document, 'DOMContentLoaded', arguments.callee);
 43         });
 44     } else if (sys.ie && sys.ie < 9){
 45         var timer = null;
 46         timer = setInterval(function () {
 47             try {
 48                 document.documentElement.doScroll('left');
 49                 doReady();
 50             } catch (e) {};
 51         }, 1);
 52     }
 53 }
 54 
 55 //跨浏览器添加事件绑定
 56 function addEvent(obj, type, fn) {
 57     if (typeof obj.addEventListener != 'undefined') {
 58         obj.addEventListener(type, fn, false);
 59     } else {
 60         //创建一个存放事件的哈希表(散列表)
 61         if (!obj.events) obj.events = {};
 62         //第一次执行时执行
 63         if (!obj.events[type]) {    
 64             //创建一个存放事件处理函数的数组
 65             obj.events[type] = [];
 66             //把第一次的事件处理函数先储存到第一个位置上
 67             if (obj['on' + type]) obj.events[type][0] = fn;
 68         } else {
 69             //同一个注册函数进行屏蔽,不添加到计数器中
 70             if (addEvent.equal(obj.events[type], fn)) return false;
 71         }
 72         //从第二次开始我们用事件计数器来存储
 73         obj.events[type][addEvent.ID++] = fn;
 74         //执行事件处理函数
 75         obj['on' + type] = addEvent.exec;
 76     }
 77 }
 78 
 79 //为每个事件分配一个计数器
 80 addEvent.ID = 1;
 81 
 82 //执行事件处理函数
 83 addEvent.exec = function (event) {
 84     var e = event || addEvent.fixEvent(window.event);
 85     var es = this.events[e.type];
 86     for (var i in es) {
 87         es[i].call(this, e);
 88     }
 89 };
 90 
 91 //同一个注册函数进行屏蔽
 92 addEvent.equal = function (es, fn) {
 93     for (var i in es) {
 94         if (es[i] == fn) return true;
 95     }
 96     return false;
 97 }
 98 
 99 //把IE常用的Event对象配对到W3C中去
100 addEvent.fixEvent = function (event) {
101     event.preventDefault = addEvent.fixEvent.preventDefault;
102     event.stopPropagation = addEvent.fixEvent.stopPropagation;
103     event.target = event.srcElement;
104     return event;
105 };
106 
107 //IE阻止默认行为
108 addEvent.fixEvent.preventDefault = function () {
109     this.returnValue = false;
110 };
111 
112 //IE取消冒泡
113 addEvent.fixEvent.stopPropagation = function () {
114     this.cancelBubble = true;
115 };
116 
117 
118 //跨浏览器删除事件
119 function removeEvent(obj, type, fn) {
120     if (typeof obj.removeEventListener != 'undefined') {
121         obj.removeEventListener(type, fn, false);
122     } else {
123         if (obj.events) {
124             for (var i in obj.events[type]) {
125                 if (obj.events[type][i] == fn) {
126                     delete obj.events[type][i];
127                 }
128             }
129         }
130     }
131 }
132 
133 
134 //跨浏览器获取视口大小
135 function getInner() {
136     if (typeof window.innerWidth != 'undefined') {
137         return {
138             width : window.innerWidth,
139             height : window.innerHeight
140         }
141     } else {
142         return {
143             width : document.documentElement.clientWidth,
144             height : document.documentElement.clientHeight
145         }
146     }
147 }
148 
149 //跨浏览器获取滚动条位置
150 function getScroll() {
151     return {
152         top : document.documentElement.scrollTop || document.body.scrollTop,
153         left : document.documentElement.scrollLeft || document.body.scrollLeft
154     }
155 }
156 
157 
158 //跨浏览器获取Style
159 function getStyle(element, attr) {
160     var value;
161     if (typeof window.getComputedStyle != 'undefined') {//W3C
162         value = window.getComputedStyle(element, null)[attr];
163     } else if (typeof element.currentStyle != 'undeinfed') {//IE
164         value = element.currentStyle[attr];
165     }
166     return value;
167 }
168 
169 
170 //判断class是否存在
171 function hasClass(element, className) {
172     return element.className.match(new RegExp('(\s|^)' +className +'(\s|$)'));
173 }
174 
175 
176 //跨浏览器添加link规则
177 function insertRule(sheet, selectorText, cssText, position) {
178     if (typeof sheet.insertRule != 'undefined') {//W3C
179         sheet.insertRule(selectorText + '{' + cssText + '}', position);
180     } else if (typeof sheet.addRule != 'undefined') {//IE
181         sheet.addRule(selectorText, cssText, position);
182     }
183 }
184 
185 //跨浏览器移出link规则
186 function deleteRule(sheet, index) {
187     if (typeof sheet.deleteRule != 'undefined') {//W3C
188         sheet.deleteRule(index);
189     } else if (typeof sheet.removeRule != 'undefined') {//IE
190         sheet.removeRule(index);
191     }
192 }
193 
194 //跨浏览器获取innerText
195 function getInnerText(element) {
196     return (typeof element.textContent == 'string') ? element.textContent : element.innerText;
197 }
198 
199 //跨浏览器设置innerText
200 function setInnerText(elememt, text) {
201     if (typeof element.textContent == 'string') {
202         element.textContent = text;
203     } else {
204         element.innerText = text;
205     }
206 }
207 
208 //获取某一个元素到最外层顶点的位置
209 function offsetTop(element) {
210     var top = element.offsetTop;
211     var parent = element.offsetParent;
212     while (parent != null) {
213         top += parent.offsetTop;
214         parent = parent.offsetParent;
215     }
216     return top;
217 }
218 
219 //删除左后空格
220 function trim(str) {
221     return str.replace(/(^s*)|(s*$)/g, '');
222 }
223 
224 //某一个值是否存在某一个数组中
225 function inArray(array, value) {
226     for (var i in array) {
227         if (array[i] === value) return true;
228     }
229     return false;
230 }
231 
232 //获取某一个节点的上一个节点的索引
233 function prevIndex(current, parent) {
234     var length = parent.children.length;
235     if (current == 0) return length - 1;
236     return parseInt(current) - 1;
237 }
238 
239 //获取某一个节点的下一个节点的索引
240 function nextIndex(current, parent) {
241     var length = parent.children.length;
242     if (current == length - 1) return 0;
243     return parseInt(current) + 1;
244 }
245 
246 //滚动条固定
247 function fixedScroll() {
248     window.scrollTo(fixedScroll.left, fixedScroll.top);
249 }
250 
251 //阻止默认行为
252 function predef(e) {
253     e.preventDefault();
254 }
255 
256 //创建cookie
257 function setCookie(name, value, expires, path, domain, secure) {
258     var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
259     if (expires instanceof Date) {
260         cookieText += '; expires=' + expires;
261     }
262     if (path) {
263         cookieText += '; expires=' + expires;
264     }
265     if (domain) {
266         cookieText += '; domain=' + domain;
267     }
268     if (secure) {
269         cookieText += '; secure';
270     }
271     document.cookie = cookieText;
272 }
273 
274 //获取cookie
275 function getCookie(name) {
276     var cookieName = encodeURIComponent(name) + '=';
277     var cookieStart = document.cookie.indexOf(cookieName);
278     var cookieValue = null;
279     if (cookieStart > -1) {
280         var cookieEnd = document.cookie.indexOf(';', cookieStart);
281         if (cookieEnd == -1) {
282             cookieEnd = document.cookie.length;
283         }
284         cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
285     }
286     return cookieValue;
287 }
288 
289 //删除cookie
290 function unsetCookie(name) {
291     document.cookie = name + "= ; expires=" + new Date(0);
292 }
tool.js
 1 $().extend('serialize', function () {
 2     for (var i = 0; i < this.elements.length; i ++) {
 3         var form = this.elements[i];
 4         var parts = {};
 5         for (var i = 0; i < form.elements.length; i ++) {
 6             var filed = form.elements[i];
 7             switch (filed.type) {
 8                 case undefined : 
 9                 case 'submit' : 
10                 case 'reset' : 
11                 case 'file' : 
12                 case 'button' : 
13                     break;
14                 case 'radio' : 
15                 case 'checkbox' : 
16                     if (!filed.selected) break;
17                 case 'select-one' : 
18                 case 'select-multiple' :
19                     for (var j = 0; j < filed.options.length; j ++) {
20                         var option = filed.options[j];
21                         if (option.selected) {
22                             var optValue = '';
23                             if (option.hasAttribute) {
24                                 optValue = (option.hasAttribute('value') ? option.value : option.text);
25                             } else {
26                                 optValue = (option.attributes('value').specified ? option.value : option.text);
27                             }
28                             parts[filed.name] = optValue; 
29                         }
30                     }
31                     break;
32                 default :
33                     parts[filed.name] = filed.value;
34             }
35         }
36         return parts;
37     }
38     return this;
39 });
base_form.js
 1 $().extend('drag', function () {
 2     var tags = arguments;
 3     for (var i = 0; i < this.elements.length; i ++) {
 4         addEvent(this.elements[i], 'mousedown', function (e) {
 5             if (trim(this.innerHTML).length == 0) e.preventDefault();
 6             var _this = this;
 7             var diffX = e.clientX - _this.offsetLeft;
 8             var diffY = e.clientY - _this.offsetTop;
 9             
10             //自定义拖拽区域
11             var flag = false;
12             
13             for (var i = 0; i < tags.length; i ++) {
14                 if (e.target == tags[i]) {
15                     flag = true;                    //只要有一个是true,就立刻返回
16                     break;
17                 }
18             }
19             
20             if (flag) {
21                 addEvent(document, 'mousemove', move);
22                 addEvent(document, 'mouseup', up);
23             } else {
24                 removeEvent(document, 'mousemove', move);
25                 removeEvent(document, 'mouseup', up);
26             }
27             
28             function move(e) {
29                 var left = e.clientX - diffX;
30                 var top = e.clientY - diffY;
31                 
32                 if (left < 0) {
33                     left = 0;
34                 } else if (left <= getScroll().left) {
35                     left = getScroll().left;
36                 } else if (left > getInner().width + getScroll().left - _this.offsetWidth) {
37                     left = getInner().width + getScroll().left - _this.offsetWidth;
38                 }
39                 
40                 if (top < 0) {
41                     top = 0;
42                 } else if (top <= getScroll().top) {
43                     top = getScroll().top;
44                 } else if (top > getInner().height + getScroll().top - _this.offsetHeight) {
45                     top = getInner().height + getScroll().top - _this.offsetHeight;
46                 }
47                 
48                 _this.style.left = left + 'px';
49                 _this.style.top = top + 'px';
50                 
51                 if (typeof _this.setCapture != 'undefined') {
52                     _this.setCapture();
53                 } 
54             }
55             
56             function up() {
57                 removeEvent(document, 'mousemove', move);
58                 removeEvent(document, 'mouseup', up);
59                 if (typeof _this.releaseCapture != 'undefined') {
60                     _this.releaseCapture();
61                 }
62             }
63         });
64     }
65     return this;
66 });
base_drag.js
 1 //封装ajax
 2 function ajax(obj) {
 3     var xhr = (function () {
 4         if (typeof XMLHttpRequest != 'undefined') {
 5             return new XMLHttpRequest();
 6         } else if (typeof ActiveXObject != 'undefined') {
 7             var version = [
 8                                         'MSXML2.XMLHttp.6.0',
 9                                         'MSXML2.XMLHttp.3.0',
10                                         'MSXML2.XMLHttp'
11             ];
12             for (var i = 0; version.length; i ++) {
13                 try {
14                     return new ActiveXObject(version[i]);
15                 } catch (e) {
16                     //跳过
17                 }    
18             }
19         } else {
20             throw new Error('您的系统或浏览器不支持XHR对象!');
21         }
22     })();
23     obj.url = obj.url + '?rand=' + Math.random();
24     obj.data = (function (data) {
25         var arr = [];
26         for (var i in data) {
27             arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
28         }
29         return arr.join('&');
30     })(obj.data);
31     if (obj.method === 'get') obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data;
32     if (obj.async === true) {
33         xhr.onreadystatechange = function () {
34             if (xhr.readyState == 4) {
35                 callback();
36             }
37         };
38     }
39     xhr.open(obj.method, obj.url, obj.async);
40     if (obj.method === 'post') {
41         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
42         xhr.send(obj.data);    
43     } else {
44         xhr.send(null);
45     }
46     if (obj.async === false) {
47         callback();
48     }
49     function callback() {
50         if (xhr.status == 200) {
51             obj.success(xhr.responseText);            //回调传递参数
52         } else {
53             alert('获取数据错误!错误代号:' + xhr.status + ',错误信息:' + xhr.statusText);
54         }    
55     }
56 }
ajax.js
  1 //前台调用
  2 var $ = function (args) {
  3     return new Base(args);
  4 }
  5 
  6 //基础库
  7 function Base(args) {
  8     //创建一个数组,来保存获取的节点和节点数组
  9     this.elements = [];
 10     
 11     if (typeof args == 'string') {
 12         //css模拟
 13         if (args.indexOf(' ') != -1) {
 14             var elements = args.split(' ');            //把节点拆开分别保存到数组里
 15             var childElements = [];                    //存放临时节点对象的数组,解决被覆盖的问题
 16             var node = [];                                //用来存放父节点用的
 17             for (var i = 0; i < elements.length; i ++) {
 18                 if (node.length == 0) node.push(document);        //如果默认没有父节点,就把document放入
 19                 switch (elements[i].charAt(0)) {
 20                     case '#' :
 21                         childElements = [];                //清理掉临时节点,以便父节点失效,子节点有效
 22                         childElements.push(this.getId(elements[i].substring(1)));
 23                         node = childElements;        //保存父节点,因为childElements要清理,所以需要创建node数组
 24                         break;
 25                     case '.' : 
 26                         childElements = [];
 27                         for (var j = 0; j < node.length; j ++) {
 28                             var temps = this.getClass(elements[i].substring(1), node[j]);
 29                             for (var k = 0; k < temps.length; k ++) {
 30                                 childElements.push(temps[k]);
 31                             }
 32                         }
 33                         node = childElements;
 34                         break;
 35                     default : 
 36                         childElements = [];
 37                         for (var j = 0; j < node.length; j ++) {
 38                             var temps = this.getTagName(elements[i], node[j]);
 39                             for (var k = 0; k < temps.length; k ++) {
 40                                 childElements.push(temps[k]);
 41                             }
 42                         }
 43                         node = childElements;
 44                 }
 45             }
 46             this.elements = childElements;
 47         } else {
 48             //find模拟
 49             switch (args.charAt(0)) {
 50                 case '#' :
 51                     this.elements.push(this.getId(args.substring(1)));
 52                     break;
 53                 case '.' : 
 54                     this.elements = this.getClass(args.substring(1));
 55                     break;
 56                 default : 
 57                     this.elements = this.getTagName(args);
 58             }
 59         }
 60     } else if (typeof args == 'object') {
 61         if (args != undefined) {    //_this是一个对象,undefined也是一个对象,区别与typeof返回的带单引号的'undefined'
 62             this.elements[0] = args;
 63         }
 64     } else if (typeof args == 'function') {
 65         this.ready(args);
 66     }
 67 }
 68 
 69 //addDomLoaded
 70 Base.prototype.ready = function (fn) {
 71     addDomLoaded(fn);
 72 };
 73 
 74 //获取ID节点
 75 Base.prototype.getId = function (id) {
 76     return document.getElementById(id)
 77 };
 78 
 79 //获取元素节点数组
 80 Base.prototype.getTagName = function (tag, parentNode) {
 81     var node = null;
 82     var temps = [];
 83     if (parentNode != undefined) {
 84         node = parentNode;
 85     } else {
 86         node = document;
 87     }
 88     var tags = node.getElementsByTagName(tag);
 89     for (var i = 0; i < tags.length; i ++) {
 90         temps.push(tags[i]);
 91     }
 92     return temps;
 93 };
 94 
 95 //获取CLASS节点数组
 96 Base.prototype.getClass = function (className, parentNode) {
 97     var node = null;
 98     var temps = [];
 99     if (parentNode != undefined) {
100         node = parentNode;
101     } else {
102         node = document;
103     }
104     var all = node.getElementsByTagName('*');
105     for (var i = 0; i < all.length; i ++) {
106         if ((new RegExp('(\s|^)' +className +'(\s|$)')).test(all[i].className)) {
107             temps.push(all[i]);
108         }
109     }
110     return temps;
111 }
112 
113 //设置CSS选择器子节点
114 Base.prototype.find = function (str) {
115     var childElements = [];
116     for (var i = 0; i < this.elements.length; i ++) {
117         switch (str.charAt(0)) {
118             case '#' :
119                 childElements.push(this.getId(str.substring(1)));
120                 break;
121             case '.' : 
122                 var temps = this.getClass(str.substring(1), this.elements[i]);
123                 for (var j = 0; j < temps.length; j ++) {
124                     childElements.push(temps[j]);
125                 }
126                 break;
127             default : 
128                 var temps = this.getTagName(str, this.elements[i]);
129                 for (var j = 0; j < temps.length; j ++) {
130                     childElements.push(temps[j]);
131                 }
132         }
133     }
134     this.elements = childElements;
135     return this;
136 }
137 
138 //获取某一个节点,并返回这个节点对象
139 Base.prototype.ge = function (num) {    
140     return this.elements[num];
141 };
142 
143 //获取首个节点,并返回这个节点对象
144 Base.prototype.first = function () {
145     return this.elements[0];
146 };
147 
148 //获取末个节点,并返回这个节点对象
149 Base.prototype.last = function () {
150     return this.elements[this.elements.length - 1];
151 };
152 
153 //获取某组节点的数量
154 Base.prototype.length = function () {
155     return this.elements.length;
156 };
157 
158 //获取某一个节点的属性
159 Base.prototype.attr = function (attr, value) {
160     for (var i = 0; i < this.elements.length; i ++) {
161         if (arguments.length == 1) {
162             return this.elements[i].getAttribute(attr);
163         } else if (arguments.length == 2) {
164             this.elements[i].setAttribute(attr, value);
165         }
166     }
167     return this;
168 };
169 
170 //获取某一个节点在整个节点组中是第几个索引
171 Base.prototype.index = function () {
172     var children = this.elements[0].parentNode.children;
173     for (var i = 0; i < children.length; i ++) {
174         if (this.elements[0] == children[i]) return i;
175     }
176 };
177 
178 //设置某一个节点的透明度
179 Base.prototype.opacity = function (num) {
180     for (var i = 0; i < this.elements.length; i ++) {
181         this.elements[i].style.opacity = num / 100;
182         this.elements[i].style.filter = 'alpha(opacity=' + num + ')';
183     }
184     return this;
185 };
186 
187 //获取某一个节点,并且Base对象
188 Base.prototype.eq = function (num) {
189     var element = this.elements[num];
190     this.elements = [];
191     this.elements[0] = element;
192     return this;
193 };
194 
195 //获取当前节点的下一个元素节点
196 Base.prototype.next = function () {
197     for (var i = 0; i < this.elements.length; i ++) {
198         this.elements[i] = this.elements[i].nextSibling;
199         if (this.elements[i] == null) throw new Error('找不到下一个同级元素节点!');
200         if (this.elements[i].nodeType == 3) this.next();
201     }
202     return this;
203 };
204 
205 //获取当前节点的上一个元素节点
206 Base.prototype.prev = function () {
207     for (var i = 0; i < this.elements.length; i ++) {
208         this.elements[i] = this.elements[i].previousSibling;
209         if (this.elements[i] == null) throw new Error('找不到上一个同级元素节点!');
210         if (this.elements[i].nodeType == 3) this.prev();
211     }
212     return this;
213 };
214 
215 //设置CSS
216 Base.prototype.css = function (attr, value) {
217     for (var i = 0; i < this.elements.length; i ++) {
218         if (arguments.length == 1) {
219             return getStyle(this.elements[i], attr);
220         }
221         this.elements[i].style[attr] = value;
222     }
223     return this;
224 }
225 
226 //添加Class
227 Base.prototype.addClass = function (className) {
228     for (var i = 0; i < this.elements.length; i ++) {
229         if (!hasClass(this.elements[i], className)) {
230             this.elements[i].className += ' ' + className;
231         }
232     }
233     return this;
234 }
235 
236 //移除Class
237 Base.prototype.removeClass = function (className) {
238     for (var i = 0; i < this.elements.length; i ++) {
239         if (hasClass(this.elements[i], className)) {
240             this.elements[i].className = this.elements[i].className.replace(new RegExp('(\s|^)' +className +'(\s|$)'), ' ');
241         }
242     }
243     return this;
244 }
245 
246 //添加link或style的CSS规则
247 Base.prototype.addRule = function (num, selectorText, cssText, position) {
248     var sheet = document.styleSheets[num];
249     insertRule(sheet, selectorText, cssText, position);
250     return this;
251 }
252 
253 //移除link或style的CSS规则
254 Base.prototype.removeRule = function (num, index) {
255     var sheet = document.styleSheets[num];
256     deleteRule(sheet, index);
257     return this;
258 }
259 
260 //设置表单字段元素
261 Base.prototype.form = function (name) {
262     for (var i = 0; i < this.elements.length; i ++) {
263         this.elements[i] = this.elements[i][name];
264     }
265     return this;
266 };
267 
268 //设置表单字段内容获取
269 Base.prototype.value = function (str) {
270     for (var i = 0; i < this.elements.length; i ++) {
271         if (arguments.length == 0) {
272             return this.elements[i].value;
273         }
274         this.elements[i].value = str;
275     }
276     return this;
277 }
278 
279 //设置innerHTML
280 Base.prototype.html = function (str) {
281     for (var i = 0; i < this.elements.length; i ++) {
282         if (arguments.length == 0) {
283             return this.elements[i].innerHTML;
284         }
285         this.elements[i].innerHTML = str;
286     }
287     return this;
288 }
289 
290 //设置innerText
291 Base.prototype.text = function (str) {
292     for (var i = 0; i < this.elements.length; i ++) {
293         if (arguments.length == 0) {
294             return getInnerText(this.elements[i]);
295         }
296         setInnerText(this.elements[i], text);
297     }
298     return this;
299 }
300 
301 //设置事件发生器
302 Base.prototype.bind = function (event, fn) {
303     for (var i = 0; i < this.elements.length; i ++) {
304         addEvent(this.elements[i], event, fn);
305     }
306     return this;
307 };
308 
309 //设置鼠标移入移出方法
310 Base.prototype.hover = function (over, out) {
311     for (var i = 0; i < this.elements.length; i ++) {
312         addEvent(this.elements[i], 'mouseover', over);
313         addEvent(this.elements[i], 'mouseout', out);
314     }
315     return this;
316 };
317 
318 //设置点击切换方法
319 Base.prototype.toggle = function () {
320     for (var i = 0; i < this.elements.length; i ++) {
321         (function (element, args) {
322             var count = 0;
323             addEvent(element, 'click', function () {
324                 args[count++ % args.length].call(this);
325             });
326         })(this.elements[i], arguments);
327     }
328     return this;
329 };
330 
331 //设置显示
332 Base.prototype.show = function () {
333     for (var i = 0; i < this.elements.length; i ++) {
334         this.elements[i].style.display = 'block';
335     }
336     return this;
337 };
338 
339 //设置隐藏
340 Base.prototype.hide = function () {
341     for (var i = 0; i < this.elements.length; i ++) {
342         this.elements[i].style.display = 'none';
343     }
344     return this;
345 };
346 
347 //设置物体居中
348 Base.prototype.center = function (width, height) {
349     var top = (getInner().height - height) / 2 + getScroll().top;
350     var left = (getInner().width - width) / 2 + getScroll().left;
351     for (var i = 0; i < this.elements.length; i ++) {
352         this.elements[i].style.top = top + 'px';
353         this.elements[i].style.left = left + 'px';
354     }
355     return this;
356 };
357 
358 //锁屏功能
359 Base.prototype.lock = function () {
360     for (var i = 0; i < this.elements.length; i ++) {
361         fixedScroll.top = getScroll().top;
362         fixedScroll.left = getScroll().left;
363         this.elements[i].style.width = getInner().width + getScroll().left + 'px';
364         this.elements[i].style.height = getInner().height + getScroll().top + 'px';
365         this.elements[i].style.display = 'block';
366         parseFloat(sys.firefox) < 4 ? document.body.style.overflow = 'hidden' : document.documentElement.style.overflow = 'hidden';
367         addEvent(this.elements[i], 'mousedown', predef);
368         addEvent(this.elements[i], 'mouseup', predef);
369         addEvent(this.elements[i], 'selectstart', predef);
370         addEvent(window, 'scroll', fixedScroll);
371     }
372     return this;
373 };
374 
375 Base.prototype.unlock = function () {
376     for (var i = 0; i < this.elements.length; i ++) {
377         this.elements[i].style.display = 'none';
378         parseFloat(sys.firefox) < 4 ? document.body.style.overflow = 'auto' : document.documentElement.style.overflow = 'auto';
379         removeEvent(this.elements[i], 'mousedown', predef);
380         removeEvent(this.elements[i], 'mouseup', predef);
381         removeEvent(this.elements[i], 'selectstart', predef);
382         removeEvent(window, 'scroll', fixedScroll);
383     }
384     return this;
385 };
386 
387 //触发点击事件
388 Base.prototype.click = function (fn) {
389     for (var i = 0; i < this.elements.length; i ++) {
390         this.elements[i].onclick = fn;
391     }
392     return this;
393 };
394 
395 //触发浏览器窗口事件
396 Base.prototype.resize = function (fn) {
397     for (var i = 0; i < this.elements.length; i ++) {
398         var element = this.elements[i];
399         addEvent(window, 'resize', function () {
400             fn();
401             if (element.offsetLeft > getInner().width + getScroll().left - element.offsetWidth) {
402                 element.style.left = getInner().width + getScroll().left - element.offsetWidth + 'px';
403                 if (element.offsetLeft <= 0 + getScroll().left) {
404                     element.style.left = 0 + getScroll().left + 'px';
405                 }
406             }
407             if(element.offsetTop > getInner().height + getScroll().top - element.offsetHeight) {
408                 element.style.top = getInner().height + getScroll().top - element.offsetHeight + 'px';
409                 if (element.offsetTop <= 0 + getScroll().top) {
410                     element.style.top = 0 + getScroll().top + 'px';
411                 }
412             }
413         });
414     }
415     return this;
416 };
417 
418 //设置动画
419 Base.prototype.animate = function (obj) {
420     for (var i = 0; i < this.elements.length; i ++) {
421         var element = this.elements[i];
422         var attr = obj['attr'] == 'x' ? 'left' : obj['attr'] == 'y' ? 'top' : 
423                        obj['attr'] == 'w' ? 'width' : obj['attr'] == 'h' ? 'height' : 
424                        obj['attr'] == 'o' ? 'opacity' : obj['attr'] != undefined ? obj['attr'] : 'left';
425 
426         
427         var start = obj['start'] != undefined ? obj['start'] : 
428                         attr == 'opacity' ? parseFloat(getStyle(element, attr)) * 100 : 
429                                                    parseInt(getStyle(element, attr));
430         
431         var t = obj['t'] != undefined ? obj['t'] : 10;                                                //可选,默认10毫秒执行一次
432         var step = obj['step'] != undefined ? obj['step'] : 20;                                //可选,每次运行10像素
433         
434         var alter = obj['alter'];
435         var target = obj['target'];
436         var mul = obj['mul'];
437         
438         var speed = obj['speed'] != undefined ? obj['speed'] : 6;                            //可选,默认缓冲速度为6
439         var type = obj['type'] == 0 ? 'constant' : obj['type'] == 1 ? 'buffer' : 'buffer';        //可选,0表示匀速,1表示缓冲,默认缓冲
440         
441         
442         if (alter != undefined && target == undefined) {
443             target = alter + start;
444         } else if (alter == undefined && target == undefined && mul == undefined) {
445             throw new Error('alter增量或target目标量必须传一个!');
446         }
447         
448         
449         
450         if (start > target) step = -step;
451         
452         if (attr == 'opacity') {
453             element.style.opacity = parseInt(start) / 100;
454             element.style.filter = 'alpha(opacity=' + parseInt(start) +')';
455         } else {
456             //element.style[attr] = start + 'px';
457         }
458         
459         
460         if (mul == undefined) {
461             mul = {};
462             mul[attr] = target;
463         } 
464         
465 
466         clearInterval(element.timer);
467         element.timer = setInterval(function () {
468         
469             /*
470                 问题1:多个动画执行了多个列队动画,我们要求不管多少个动画只执行一个列队动画
471                 问题2:多个动画数值差别太大,导致动画无法执行到目标值,原因是定时器提前清理掉了
472                 
473                 解决1:不管多少个动画,只提供一次列队动画的机会
474                 解决2:多个动画按最后一个分动画执行完毕后再清理即可
475             */
476             
477             //创建一个布尔值,这个值可以了解多个动画是否全部执行完毕
478             var flag = true; //表示都执行完毕了
479             
480             
481             for (var i in mul) {
482                 attr = i == 'x' ? 'left' : i == 'y' ? 'top' : i == 'w' ? 'width' : i == 'h' ? 'height' : i == 'o' ? 'opacity' : i != undefined ? i : 'left';
483                 target = mul[i];
484                     
485 
486                 if (type == 'buffer') {
487                     step = attr == 'opacity' ? (target - parseFloat(getStyle(element, attr)) * 100) / speed :
488                                                          (target - parseInt(getStyle(element, attr))) / speed;
489                     step = step > 0 ? Math.ceil(step) : Math.floor(step);
490                 }
491                 
492                 
493                 
494                 if (attr == 'opacity') {
495                     if (step == 0) {
496                         setOpacity();
497                     } else if (step > 0 && Math.abs(parseFloat(getStyle(element, attr)) * 100 - target) <= step) {
498                         setOpacity();
499                     } else if (step < 0 && (parseFloat(getStyle(element, attr)) * 100 - target) <= Math.abs(step)) {
500                         setOpacity();
501                     } else {
502                         var temp = parseFloat(getStyle(element, attr)) * 100;
503                         element.style.opacity = parseInt(temp + step) / 100;
504                         element.style.filter = 'alpha(opacity=' + parseInt(temp + step) + ')';
505                     }
506                     
507                     if (parseInt(target) != parseInt(parseFloat(getStyle(element, attr)) * 100)) flag = false;
508 
509                 } else {
510                     if (step == 0) {
511                         setTarget();
512                     } else if (step > 0 && Math.abs(parseInt(getStyle(element, attr)) - target) <= step) {
513                         setTarget();
514                     } else if (step < 0 && (parseInt(getStyle(element, attr)) - target) <= Math.abs(step)) {
515                         setTarget();
516                     } else {
517                         element.style[attr] = parseInt(getStyle(element, attr)) + step + 'px';
518                     }
519                     
520                     if (parseInt(target) != parseInt(getStyle(element, attr))) flag = false;
521                 }
522                 
523                 //document.getElementById('test').innerHTML += i + '--' + parseInt(target) + '--' + parseInt(getStyle(element, attr)) + '--' + flag + '<br />';
524                 
525             }
526             
527             if (flag) {
528                 clearInterval(element.timer);
529                 if (obj.fn != undefined) obj.fn();
530             }
531                 
532         }, t);
533         
534         function setTarget() {
535             element.style[attr] = target + 'px';
536         }
537         
538         function setOpacity() {
539             element.style.opacity = parseInt(target) / 100;
540             element.style.filter = 'alpha(opacity=' + parseInt(target) + ')';
541         }
542     }
543     return this;
544 };
545 
546 //插件入口
547 Base.prototype.extend = function (name, fn) {
548     Base.prototype[name] = fn;
549 
原文地址:https://www.cnblogs.com/double405/p/5053513.html