//前臺調用 var $ = function (args) { return new Base(args); } //基礎庫 function Base(args) { //創建一個數組,來保存獲取的節點和節點數組 this.elements = []; if (typeof args == 'string') { //css模擬 if (args.indexOf(' ') != -1) { var elements = args.split(' '); //把節點拆開分別保存到數組裏 var childElements = []; //存放臨時節點對象的數組,解決被覆蓋的問題 var node = []; //用來存放父節點用的 for (var i = 0; i < elements.length; i ++) { if (node.length == 0) node.push(document); //如果默認沒有父節點,就把document放入 switch (elements[i].charAt(0)) { case '#' : childElements = []; //清理掉臨時節點,以便父節點失效,子節點有效 childElements.push(this.getId(elements[i].substring(1))); node = childElements; //保存父節點,因爲childElements要清理,所以需要創建node數組 break; case '.' : childElements = []; for (var j = 0; j < node.length; j ++) { var temps = this.getClass(elements[i].substring(1), node[j]); for (var k = 0; k < temps.length; k ++) { childElements.push(temps[k]); } } node = childElements; break; default : childElements = []; for (var j = 0; j < node.length; j ++) { var temps = this.getTagName(elements[i], node[j]); for (var k = 0; k < temps.length; k ++) { childElements.push(temps[k]); } } node = childElements; } } this.elements = childElements; } else { //find模擬 switch (args.charAt(0)) { case '#' : this.elements.push(this.getId(args.substring(1))); break; case '.' : this.elements = this.getClass(args.substring(1)); break; default : this.elements = this.getTagName(args); } } } else if (typeof args == 'object') { if (args != undefined) { //_this是一個對象,undefined也是一個對象,區別與typeof返回的帶單引號的'undefined' this.elements[0] = args; } } else if (typeof args == 'function') { this.ready(args); } } //addDomLoaded Base.prototype.ready = function (fn) { addDomLoaded(fn); }; //獲取ID節點 Base.prototype.getId = function (id) { return document.getElementById(id) }; //獲取元素節點數組 Base.prototype.getTagName = function (tag, parentNode) { var node = null; var temps = []; if (parentNode != undefined) { node = parentNode; } else { node = document; } var tags = node.getElementsByTagName(tag); for (var i = 0; i < tags.length; i ++) { temps.push(tags[i]); } return temps; }; //獲取CLASS節點數組 Base.prototype.getClass = function (className, parentNode) { var node = null; var temps = []; if (parentNode != undefined) { node = parentNode; } else { node = document; } var all = node.getElementsByTagName('*'); for (var i = 0; i < all.length; i ++) { if (all[i].className == className) { temps.push(all[i]); } } return temps; } //設置CSS選擇器子節點 Base.prototype.find = function (str) { var childElements = []; for (var i = 0; i < this.elements.length; i ++) { switch (str.charAt(0)) { case '#' : childElements.push(this.getId(str.substring(1))); break; case '.' : var temps = this.getClass(str.substring(1), this.elements[i]); for (var j = 0; j < temps.length; j ++) { childElements.push(temps[j]); } break; default : var temps = this.getTagName(str, this.elements[i]); for (var j = 0; j < temps.length; j ++) { childElements.push(temps[j]); } } } this.elements = childElements; return this; } //獲取某一個節點,並返回這個節點對象 Base.prototype.ge = function (num) { return this.elements[num]; }; //獲取首個節點,並返回這個節點對象 Base.prototype.first = function () { return this.elements[0]; }; //獲取末個節點,並返回這個節點對象 Base.prototype.last = function () { return this.elements[this.elements.length - 1]; }; //獲取某一個節點,並且Base對象 Base.prototype.eq = function (num) { var element = this.elements[num]; this.elements = []; this.elements[0] = element; return this; }; //獲取當前節點的下一個元素節點 Base.prototype.next = function () { for (var i = 0; i < this.elements.length; i ++) { this.elements[i] = this.elements[i].nextSibling; if (this.elements[i] == null) throw new Error('找不到下一個同級元素節點!'); if (this.elements[i].nodeType == 3) this.next(); } return this; }; //獲取當前節點的上一個元素節點 Base.prototype.prev = function () { for (var i = 0; i < this.elements.length; i ++) { this.elements[i] = this.elements[i].previousSibling; if (this.elements[i] == null) throw new Error('找不到上一個同級元素節點!'); if (this.elements[i].nodeType == 3) this.prev(); } return this; }; //設置CSS Base.prototype.css = function (attr, value) { for (var i = 0; i < this.elements.length; i ++) { if (arguments.length == 1) { return getStyle(this.elements[i], attr); } this.elements[i].style[attr] = value; } return this; } //添加Class Base.prototype.addClass = function (className) { for (var i = 0; i < this.elements.length; i ++) { if (!hasClass(this.elements[i], className)) { this.elements[i].className += ' ' + className; } } return this; } //移除Class Base.prototype.removeClass = function (className) { for (var i = 0; i < this.elements.length; i ++) { if (hasClass(this.elements[i], className)) { this.elements[i].className = this.elements[i].className.replace(new RegExp('(\\s|^)' +className +'(\\s|$)'), ' '); } } return this; } //添加link或style的CSS規則 Base.prototype.addRule = function (num, selectorText, cssText, position) { var sheet = document.styleSheets[num]; insertRule(sheet, selectorText, cssText, position); return this; } //移除link或style的CSS規則 Base.prototype.removeRule = function (num, index) { var sheet = document.styleSheets[num]; deleteRule(sheet, index); return this; } //設置innerHTML Base.prototype.html = function (str) { for (var i = 0; i < this.elements.length; i ++) { if (arguments.length == 0) { return this.elements[i].innerHTML; } this.elements[i].innerHTML = str; } return this; } //設置鼠標移入移出方法 Base.prototype.hover = function (over, out) { for (var i = 0; i < this.elements.length; i ++) { addEvent(this.elements[i], 'mouseover', over); addEvent(this.elements[i], 'mouseout', out); } return this; }; //設置點擊切換方法 Base.prototype.toggle = function () { for (var i = 0; i < this.elements.length; i ++) { (function (element, args) { var count = 0; addEvent(element, 'click', function () { args[count++ % args.length].call(this); }); })(this.elements[i], arguments); } return this; }; //設置顯示 Base.prototype.show = function () { for (var i = 0; i < this.elements.length; i ++) { this.elements[i].style.display = 'block'; } return this; }; //設置隱藏 Base.prototype.hide = function () { for (var i = 0; i < this.elements.length; i ++) { this.elements[i].style.display = 'none'; } return this; }; //設置物體居中 Base.prototype.center = function (width, height) { var top = (getInner().height - 250) / 2; var left = (getInner().width - 350) / 2; for (var i = 0; i < this.elements.length; i ++) { this.elements[i].style.top = top + 'px'; this.elements[i].style.left = left + 'px'; } return this; }; //鎖屏功能 Base.prototype.lock = function () { for (var i = 0; i < this.elements.length; i ++) { this.elements[i].style.width = getInner().width + 'px'; this.elements[i].style.height = getInner().height + 'px'; this.elements[i].style.display = 'block'; document.documentElement.style.overflow = 'hidden'; addEvent(window, 'scroll', scrollTop); } return this; }; Base.prototype.unlock = function () { for (var i = 0; i < this.elements.length; i ++) { this.elements[i].style.display = 'none'; document.documentElement.style.overflow = 'auto'; removeEvent(window, 'scroll', scrollTop); } return this; }; //觸發點擊事件 Base.prototype.click = function (fn) { for (var i = 0; i < this.elements.length; i ++) { this.elements[i].onclick = fn; } return this; }; //觸發瀏覽器窗口事件 Base.prototype.resize = function (fn) { for (var i = 0; i < this.elements.length; i ++) { var element = this.elements[i]; addEvent(window, 'resize', function () { fn(); if (element.offsetLeft > getInner().width - element.offsetWidth) { element.style.left = getInner().width - element.offsetWidth + 'px'; } if (element.offsetTop > getInner().height - element.offsetHeight) { element.style.top = getInner().height - element.offsetHeight + 'px'; } }); } return this; }; //設置動畫 Base.prototype.animate = function (obj) { for (var i = 0; i < this.elements.length; i ++) { var element = this.elements[i]; var attr = obj['attr'] == 'x' ? 'left' : obj['attr'] == 'y' ? 'top' : obj['attr'] == 'w' ? 'width' : obj['attr'] == 'h' ? 'height' : obj['attr'] == 'o' ? 'opacity' : obj['attr'] != undefined ? obj['attr'] : 'left'; var start = obj['start'] != undefined ? obj['start'] : attr == 'opacity' ? parseFloat(getStyle(element, attr)) * 100 : parseInt(getStyle(element, attr)); var t = obj['t'] != undefined ? obj['t'] : 10; //可選,默認10毫秒執行一次 var step = obj['step'] != undefined ? obj['step'] : 20; //可選,每次運行10像素 var alter = obj['alter']; var target = obj['target']; var mul = obj['mul']; var speed = obj['speed'] != undefined ? obj['speed'] : 6; //可選,默認緩衝速度爲6 var type = obj['type'] == 0 ? 'constant' : obj['type'] == 1 ? 'buffer' : 'buffer'; //可選,0表示勻速,1表示緩衝,默認緩衝 if (alter != undefined && target == undefined) { target = alter + start; } else if (alter == undefined && target == undefined && mul == undefined) { throw new Error('alter增量或target目標量必須傳一個!'); } if (start > target) step = -step; if (attr == 'opacity') { element.style.opacity = parseInt(start) / 100; element.style.filter = 'alpha(opacity=' + parseInt(start) +')'; } else { //element.style[attr] = start + 'px'; } if (mul == undefined) { mul = {}; mul[attr] = target; } clearInterval(element.timer); element.timer = setInterval(function () { /* 問題1:多個動畫執行了多個列隊動畫,我們要求不管多少個動畫只執行一個列隊動畫 問題2:多個動畫數值差別太大,導致動畫無法執行到目標值,原因是定時器提前清理掉了 解決1:不管多少個動畫,只提供一次列隊動畫的機會 解決2:多個動畫按最後一個分動畫執行完畢後再清理即可 */ //創建一個布爾值,這個值可以瞭解多個動畫是否全部執行完畢 var flag = true; //表示都執行完畢了 for (var i in mul) { attr = i == 'x' ? 'left' : i == 'y' ? 'top' : i == 'w' ? 'width' : i == 'h' ? 'height' : i == 'o' ? 'opacity' : i != undefined ? i : 'left'; target = mul[i]; if (type == 'buffer') { step = attr == 'opacity' ? (target - parseFloat(getStyle(element, attr)) * 100) / speed : (target - parseInt(getStyle(element, attr))) / speed; step = step > 0 ? Math.ceil(step) : Math.floor(step); } if (attr == 'opacity') { if (step == 0) { setOpacity(); } else if (step > 0 && Math.abs(parseFloat(getStyle(element, attr)) * 100 - target) <= step) { setOpacity(); } else if (step < 0 && (parseFloat(getStyle(element, attr)) * 100 - target) <= Math.abs(step)) { setOpacity(); } else { var temp = parseFloat(getStyle(element, attr)) * 100; element.style.opacity = parseInt(temp + step) / 100; element.style.filter = 'alpha(opacity=' + parseInt(temp + step) + ')'; } if (parseInt(target) != parseInt(parseFloat(getStyle(element, attr)) * 100)) flag = false; } else { if (step == 0) { setTarget(); } else if (step > 0 && Math.abs(parseInt(getStyle(element, attr)) - target) <= step) { setTarget(); } else if (step < 0 && (parseInt(getStyle(element, attr)) - target) <= Math.abs(step)) { setTarget(); } else { element.style[attr] = parseInt(getStyle(element, attr)) + step + 'px'; } if (parseInt(target) != parseInt(getStyle(element, attr))) flag = false; } //document.getElementById('test').innerHTML += i + '--' + parseInt(target) + '--' + parseInt(getStyle(element, attr)) + '--' + flag + '<br />'; } if (flag) { clearInterval(element.timer); if (obj.fn != undefined) obj.fn(); } }, t); function setTarget() { element.style[attr] = target + 'px'; } function setOpacity() { element.style.opacity = parseInt(target) / 100; element.style.filter = 'alpha(opacity=' + parseInt(target) + ')'; } } return this; }; //插件入口 Base.prototype.extend = function (name, fn) { Base.prototype[name] = fn; };
//瀏覽器檢測 (function () { window.sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/msie ([\d.]+)/)) ? sys.ie = s[1] : (s = ua.match(/firefox\/([\d.]+)/)) ? sys.firefox = s[1] : (s = ua.match(/chrome\/([\d.]+)/)) ? sys.chrome = s[1] : (s = ua.match(/opera\/.*version\/([\d.]+)/)) ? sys.opera = s[1] : (s = ua.match(/version\/([\d.]+).*safari/)) ? sys.safari = s[1] : 0; if (/webkit/.test(ua)) sys.webkit = ua.match(/webkit\/([\d.]+)/)[1]; })(); //DOM加載 function addDomLoaded(fn) { var isReady = false; var timer = null; function doReady() { if (timer) clearInterval(timer); if (isReady) return; isReady = true; fn(); } if ((sys.opera && sys.opera < 9) || (sys.firefox && sys.firefox < 3) || (sys.webkit && sys.webkit < 525)) { //無論採用哪種,基本上用不着了 /*timer = setInterval(function () { if (/loaded|complete/.test(document.readyState)) { //loaded是部分加載,有可能只是DOM加載完畢,complete是完全加載,類似於onload doReady(); } }, 1);*/ timer = setInterval(function () { if (document && document.getElementById && document.getElementsByTagName && document.body) { doReady(); } }, 1); } else if (document.addEventListener) {//W3C addEvent(document, 'DOMContentLoaded', function () { fn(); removeEvent(document, 'DOMContentLoaded', arguments.callee); }); } else if (sys.ie && sys.ie < 9){ var timer = null; timer = setInterval(function () { try { document.documentElement.doScroll('left'); doReady(); } catch (e) {}; }, 1); } } //跨瀏覽器添加事件綁定 function addEvent(obj, type, fn) { if (typeof obj.addEventListener != 'undefined') { obj.addEventListener(type, fn, false); } else { //創建一個存放事件的哈希表(散列表) if (!obj.events) obj.events = {}; //第一次執行時執行 if (!obj.events[type]) { //創建一個存放事件處理函數的數組 obj.events[type] = []; //把第一次的事件處理函數先儲存到第一個位置上 if (obj['on' + type]) obj.events[type][0] = fn; } else { //同一個註冊函數進行屏蔽,不添加到計數器中 if (addEvent.equal(obj.events[type], fn)) return false; } //從第二次開始我們用事件計數器來存儲 obj.events[type][addEvent.ID++] = fn; //執行事件處理函數 obj['on' + type] = addEvent.exec; } } //爲每個事件分配一個計數器 addEvent.ID = 1; //執行事件處理函數 addEvent.exec = function (event) { var e = event || addEvent.fixEvent(window.event); var es = this.events[e.type]; for (var i in es) { es[i].call(this, e); } }; //同一個註冊函數進行屏蔽 addEvent.equal = function (es, fn) { for (var i in es) { if (es[i] == fn) return true; } return false; } //把IE常用的Event對象配對到W3C中去 addEvent.fixEvent = function (event) { event.preventDefault = addEvent.fixEvent.preventDefault; event.stopPropagation = addEvent.fixEvent.stopPropagation; event.target = event.srcElement; return event; }; //IE阻止默認行爲 addEvent.fixEvent.preventDefault = function () { this.returnValue = false; }; //IE取消冒泡 addEvent.fixEvent.stopPropagation = function () { this.cancelBubble = true; }; //跨瀏覽器刪除事件 function removeEvent(obj, type, fn) { if (typeof obj.removeEventListener != 'undefined') { obj.removeEventListener(type, fn, false); } else { if (obj.events) { for (var i in obj.events[type]) { if (obj.events[type][i] == fn) { delete obj.events[type][i]; } } } } } //跨瀏覽器獲取視口大小 function getInner() { if (typeof window.innerWidth != 'undefined') { return { width : window.innerWidth, height : window.innerHeight } } else { return { width : document.documentElement.clientWidth, height : document.documentElement.clientHeight } } } //跨瀏覽器獲取滾動條位置 function getScroll() { return { top : document.documentElement.scrollTop || document.body.scrollTop, left : document.documentElement.scrollLeft || document.body.scrollLeft } } //跨瀏覽器獲取Style function getStyle(element, attr) { var value; if (typeof window.getComputedStyle != 'undefined') {//W3C value = window.getComputedStyle(element, null)[attr]; } else if (typeof element.currentStyle != 'undeinfed') {//IE value = element.currentStyle[attr]; } return value; } //判斷class是否存在 function hasClass(element, className) { return element.className.match(new RegExp('(\\s|^)' +className +'(\\s|$)')); } //跨瀏覽器添加link規則 function insertRule(sheet, selectorText, cssText, position) { if (typeof sheet.insertRule != 'undefined') {//W3C sheet.insertRule(selectorText + '{' + cssText + '}', position); } else if (typeof sheet.addRule != 'undefined') {//IE sheet.addRule(selectorText, cssText, position); } } //跨瀏覽器移出link規則 function deleteRule(sheet, index) { if (typeof sheet.deleteRule != 'undefined') {//W3C sheet.deleteRule(index); } else if (typeof sheet.removeRule != 'undefined') {//IE sheet.removeRule(index); } } //刪除左後空格 function trim(str) { return str.replace(/(^\s*)|(\s*$)/g, ''); } //滾動條清零 function scrollTop() { document.documentElement.scrollTop = 0; document.body.scrollTop = 0; }
$().extend('drag', function () { var tags = arguments; for (var i = 0; i < this.elements.length; i ++) { addEvent(this.elements[i], 'mousedown', function (e) { if (trim(this.innerHTML).length == 0) e.preventDefault(); var _this = this; var diffX = e.clientX - _this.offsetLeft; var diffY = e.clientY - _this.offsetTop; //自定義拖拽區域 var flag = false; for (var i = 0; i < tags.length; i ++) { if (e.target == tags[i]) { flag = true; //只要有一個是true,就立刻返回 break; } } if (flag) { addEvent(document, 'mousemove', move); addEvent(document, 'mouseup', up); } else { removeEvent(document, 'mousemove', move); removeEvent(document, 'mouseup', up); } function move(e) { var left = e.clientX - diffX; var top = e.clientY - diffY; if (left < 0) { left = 0; } else if (left > getInner().width - _this.offsetWidth) { left = getInner().width - _this.offsetWidth; } if (top < 0) { top = 0; } else if (top > getInner().height - _this.offsetHeight) { top = getInner().height - _this.offsetHeight; } _this.style.left = left + 'px'; _this.style.top = top + 'px'; if (typeof _this.setCapture != 'undefined') { _this.setCapture(); } } function up() { removeEvent(document, 'mousemove', move); removeEvent(document, 'mouseup', up); if (typeof _this.releaseCapture != 'undefined') { _this.releaseCapture(); } } }); } return this; });