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元素的高度偏移量
}
时间： 2024-10-11 11:52:03