zoukankan      html  css  js  c++  java
  • 用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 
  • 相关阅读:
    HDOJ 4747 Mex
    HDU 1203 I NEED A OFFER!
    HDU 2616 Kill the monster
    HDU 3496 Watch The Movie
    Codeforces 347A A. Difference Row
    Codeforces 347B B. Fixed Points
    Codeforces 372B B. Hungry Sequence
    HDU 1476 Sudoku Killer
    HDU 1987 How many ways
    HDU 2564 词组缩写
  • 原文地址:https://www.cnblogs.com/double405/p/5053513.html
Copyright © 2011-2022 走看看