• 用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 
  • 相关阅读:
    修改UISearchBar的Cancel按钮为中文等本地化问题
    Xcode6 运行程序后,右侧Debug区域的Memory显示空白解决方法
    vuec常用插件
    clipboard 实现复制
    vue 表单操作
    vue 常用功能和命令
    关闭警告&关闭eslint
    vue 添加 fastclick的支持
    url编码函数encodeURI和encodeURIComponent
    jsencrypt加解密 &&cryptico
  • 原文地址:https://www.cnblogs.com/double405/p/5053513.html
Copyright © 2020-2023  润新知