function stopBubble(e) { if (e && e.stopPropagation) {//如果傳入了事件物件,那麼就是非IE瀏覽器 e.stopPropagation(); } else { window.event.cancelBubble = true;//使用IE的方式來取消事件冒泡 } } function stopDefault(e) { if (e && e.preventDefault) { e.preventDefault();//防止預設瀏覽器行為(W3C) } else { window.event.returnValue = false; } return false; } function addEvent(element, type, handler) { if (!handler.$$guid) {//為每一個事件處理函式賦予一個獨立的ID handler.$$guid = addEvent.guid++; } if (!element.events) {//為元素建立一個事件型別的雜湊表 element.events = {}; } var handlers = element.events[type]; if (!handler) { handlers = element.events[type] = {}; if (element["on" + type]) {//儲存已有的事件處理函式(如果已經存在一個) handlers[0] = element["on" + type]; } } handlers[handler.$$guid] = handler;//在雜湊表中存在該事件處理函式 element["on" + type] = handleEvent; } addEvent.guid = 1;//建立獨立ID的計數器 function removeEvent(element, type, handler) {//從雜湊表中刪除事件處理函式 if (element.events && element.events[type]) { delete element.events[type][handler.$$guid]; } } function handleEvent(event) { var returnValue = true; event = event || fixEvent(window.event);//獲得事件物件(IE使用全域性的事件物件) var handlers = this.events[event.type];//獲得事件處理函式雜湊表的引用 for (var i in handlers) {//依次執行每個事件處理函式 this.$$handlerEvent = handlers[i]; if (this.$$handlerEvent(event) === false) { returnValue = false; } } return returnValue; } function fixEvent(event) {//增加一些IE事件物件的缺乏的方法 event.preventDefault = fixEvent.preventDefault;//增加W3C標準事件方法 event.stopPropagation = fixEvent.stopPropagation; return event; } fixEvent.preventDefault = function () { this.returnValue = false; } fixEvent.stopPropagation = function () { this.cancelBubble = true; } //獲取指定元素elem的樣式屬性 function getStyle(elem, name) { if (elem.style[name]) {//如果屬性存在於style[]中,那麼它已被設定了(並且是當前的) return elem.style[name]; } else { if (elem.currentStyle) {//嘗試使用IE的方法 return elem.currentStyle[name]; } else if (document.defaultView && document.defaultView.getComputedStyle) {//或者W3C的方法,如果存在的話 //name=name.replace(/([A-Z)/g,"-$1"); name = name.toLowerCase(); var s = document.defaultView.getComputedStyle(elem, '');//獲取樣式物件並獲取屬性(存在的話)值 return s && s.getPropertyValue(name); } else { return null; } } } //獲取元素的X(水平、左端)位置 function pageX(elem) { return elem.offsetParent ?//檢視我們是否位於根元素 elem.offsetLeft + pageX(elem.offsetParent) ://如果我們能繼續得到上一個元素,增加當前的偏移量並繼續向上遞迴 elem.offsetLeft;//否則獲得當前的偏移量 } //獲得元素Y(垂直、頂端)位置 function pageY(elem) { return elem.offsetParent ?//檢視我們是否位於根元素 elem.offsetTop + pageY(elem.offsetParent) ://如果能繼續得到上一個元素,增加當前的偏移量並繼續向上遞迴 elem.offsetTop;//否則獲取當前的偏移量 } //獲取元素相對於父親的水平位置 function parentX(elem) { return elem.parentNode == elem.offsetParent ?//如果offsetParent是元素的父親,那麼提前退出 elem.offsetLeft : pageX(elem) - pageX(elem.parentNode);//否則,我們需要找到元素和元素的父親相對於整個頁面位置,並計算他們之前的差 } //獲取元素相對於父親的垂直位置 function parentY(elem) { return elem.parentNode == elem.offsetParent ?//如果offsetParent是元素的父親,那麼提前退出 elem.offsetTop : pageX(elem) - pageY(elem.parentNode);//否則,我們需要找到元素和元素的父親相對於整個頁面位置,並計算他們之前的差 } //恢復css原的屬性值 防止reset css函式副作用的函式 function restoreCSS(elem, prop) { for (var i in prop) {//重置所有屬性,恢復它們的原有值 elem.style[i] = prop[i]; } } //設定CSS一組屬性的函式,它可以恢復到原有設定 function resetCSS(elem, prop) { var old = []; for (var i in prop) { old[i] = elem.style[i];//記錄舊的屬性值 elem.style[i] = prop[i];//並設定新的值 } return old;//返回已經變化的值集合,預留給restoreCSS函式使用 } function getHeight(elem) {//獲得元素的真實高度 return parseInt(getStyle(elem, 'height'));//獲得CSS的最終值並解析出可用的數值 } function getWidth(elem) {//獲得元素的真實寬度 return parseInt(getStyle(elem, 'width'));//獲得CSS的最終值並解析出可用的數值 } //查詢元素完整的,可能的高度 function fullHeight(elem) { //如果元素是顯示的,那麼使用offsetHeight就能得到高度,如果沒有offsetHeight,則使用getHeight() if (getStyle(elem, 'display') != 'none') { return elem.offsetHeight || getHeight(elem); } //處理display為none的元素,所以重置它的css屬性以獲取更精確的讀數 var old = resetCSS(elem, { display: '', visibility: 'hidden', position: 'absolute' }); var h = elem.clientHeight || getHeight(elem);//使用clientHeihgt找到元素的完整高度,如果還不生效,則使用getHeight函式 restoreCSS(elem, old);//恢復css原的屬性 return h;//返回元素的完整高度 } //查詢元素完整的,可能的寬度 function fullWidth(elem) { //如果元素是顯示的,那麼使用offsetWidth就能得到高度,如果沒有offsetHeight,則使用getHeight() if (getStyle(elem, 'display') != 'none') { return elem.offsetWidth || getWidth(elem); } //處理display為none的元素,所以重置它的css屬性以獲取更精確的讀數 var old = resetCSS(elem, { display: '', visibility: 'hidden', position: 'absolute' }); var h = elem.clientWidth || getWidth(elem);//使用clientWidth找到元素的完整高度,如果還不生效,則使用getWidth函式 restoreCSS(elem, old);//恢復css原的屬性 return h;//返回元素的完整高度 } function hide(elem) {//隱藏元素 var curDisplay = getStyle(elem, 'display');//找到元素display的當前狀態 if (curDisplay != 'none') {//記錄它的display狀態 elem.$oldDisplay = curDisplay; } elem.style.display = 'none';//設定display為none 隱藏元素 } function show(elem) {//顯示元素 elem.style.display = elem.$oldDisplay || '';//設定display屬性為它的原始值,如沒有記錄原始值 則使用block } function setOpacity(elem, level) {//設定元素透明度 級別從0-100 if (elem.filters) {//如果存在filters這個屬性 則它是IE 所以設定元素的Alpha濾鏡 elem.style.filters = "alpha(opacity=" + level + ")"; } else { elem.style.opacity = level / 100;//使用W3C的opacity屬性 } } function slideDown(elem) { elem.style.height = '0px';//從0高度開始滑動 show(elem);//先顯示元素(但是看不到它,因為它的高度是0) var h = fullHeight(elem);//找到元素的完整的潛在高度 for (var i = 0; i <= 100; i += 5) {//在一秒鐘內執行一個20幀的動畫 //保證能夠保持正確的i的閉包函式 (function () { var pos = i; setTimeout(function () { elem.style.height = ((pos / 100) * h) + 'px'; }, (pos + 1) * 10); })(); } } function fadeIn(elem) { setOpacity(elem, 0);//從0透明度開始 show(elem);//先顯示元素(但是看不到它,因為它的透明度是0) for (var i = 0; i <= 100; i += 5) {//在一秒鐘內執行一個20幀的動畫 //保證能夠保持正確的i的閉包函式 (function () { var pos = i; setTimeout(function () { setOpacity(elem, pos); }, (pos + 1) * 10); })(); } } function getX(e) {//獲取游標的水平位置 e = e || window.event;//標準化事件物件 return e.pageX || e.clientX + document.body.scrollLeft;//先檢查非IE瀏覽器的位置,再檢查IE的位置 } function getY(e) {//獲取游標的垂直位置 e = e || window.event;//標準化事件物件 return e.pageY || e.clientY + document.body.scrollTop;//先檢查非IE瀏覽器的位置,再檢查IE的位置 } function getElementX(e) {//獲得滑鼠相對於當前元素(事件物件e的屬性target)的X位置 return (e && e.layerX) || window.event.offsetX;//獲得正確的偏移量 } function getElementY(e) {//獲得滑鼠相對於當前元素(事件物件e的屬性target)的Y位置 return (e && e.layerY) || window.event.offsetY;//獲得正確的偏移量 } function pageHeight() {//返回頁面的高度(增加內容的時候可能會改變) return document.body.scrollHeight; } function pageWidth() {//返回頁面的寬度(增加內容的時候可能會改變) return document.body.scrollWidth; } function scrollX() {//確定瀏覽器水平滾動位置的函式 var de = document.documentElement; return self.pageXOffset ||//如果瀏覽器存在pageXOffset屬性 則使用它 (de || de.scrollLeft) ||//嘗試獲取根節點的左端滾動的偏移量 document.body.scrollLeft;//嘗試獲取body元素的左端滾動的偏移量 } function scrollY() {//確定瀏覽器垂直滾動位置的函式 var de = document.documentElement; return self.pageYOffset ||//如果瀏覽器存在pageYOffset屬性 則使用它 (de || de.scrollTop) ||//嘗試獲取根節點的頂端滾動的偏移量 document.body.scrollTop;//嘗試獲取body元素的頂端滾動的偏移量 } function windowHeight() {//獲取視口的高度 var de = document.documentElement; return self.innerHeight ||////如果瀏覽器存在innerHeight屬性 則使用它 (de && de.clientHeight) ||//嘗試獲取根節點的高度偏移量 document.body.clientHeight;//嘗試獲取body元素的高度偏移量 } function windowWidth() {//獲取視口的寬度 var de = document.documentElement; return self.innerWidth ||////如果瀏覽器存在innerWidth屬性 則使用它 (de && de.clientWidth) ||//嘗試獲取根節點的高度偏移量 document.body.clientWidth;//嘗試獲取body元素的高度偏移量 }