在线时间 983 小时 专家 0 UID 281860 注册时间 2006-8-7 帖子 2057 精华 1 积分 5861 居住地 浙江省 杭州市 离线 18 天 专长: 前端制作,Javascript编程,ASP
帖子 2057 体力 5636 威望 45 居住地 浙江省 杭州市
发表于 2009-9-18 13:28:51
| 显示全部楼层
回复 252# dededesign 的帖子
我稍微组织了下，看看这样的代码，应该比较好理解吧var YHover = function(){ var D = document, ua = navigator.userAgent.toLowerCase(), isOpera = (ua.indexOf('opera') > -1), isIE = (!isOpera && ua.indexOf('msie') > -1); return { photos: function(container, samples){ var Container = D.getElementById(container), Samples = Container.getElementsByTagName(samples), i, len = Samples.length, Overlayer = null, oSelf = this; for (i = 0; i < len; ++i) { Samples[i].onmouseover = function(){ var imgPath = this.parentNode.href, imgAlt = this.alt, bigImg = '<img src="' + imgPath + '" alt="' + imgAlt + '" />', pageX = oSelf.getPageX(this), pageY = oSelf.getPageY(this), viewportWidth = oSelf.getViewportWidth(), viewportHeight = oSelf.getViewportHeight(), layerWidth = 0, layerHeight = 0; if (!Overlayer) { Overlayer = D.createElement('div'); Overlayer.id = 'overlayer'; D.body.appendChild(Overlayer); } else { Overlayer.style.display = 'block'; } layerWidth = Overlayer.offsetWidth; layerHeight = Overlayer.offsetHeight; if ((pageX + this.offsetWidth + 5 + layerWidth) > viewportWidth) { pageX -= 5 + layerWidth; } else { pageX += this.offsetWidth + 5; } if ((pageY + this.offsetHeight + 5 + layerHeight) > viewportHeight) { pageY -= 5 + layerHeight; } Overlayer.style.left = pageX + 'px'; Overlayer.style.top = pageY + 'px'; Overlayer.innerHTML = bigImg; }; Samples[i].onmouseout = function(){ Overlayer.style.display = 'none'; Overlayer.innerHTML = ''; }; } }, getViewportWidth: function(){ var j = self.innerWidth; var k = D.compatMode; if (k || isIE) { j = (k == "CSS1Compat") ? D.documentElement.clientWidth : D.body.clientWidth; } return j; }, getViewportHeight: function(){ var j = self.innerHeight; var k = D.compatMode; if ((k || isIE) && !isOpera) { j = (k == "CSS1Compat") ? D.documentElement.clientHeight : D.body.clientHeight; } return j; }, getPageX: function(el){ var box = null, parentNode = null, left = 0; if (el.getBoundingClientRect) { box = el.getBoundingClientRect(); left = box.left + Math.max(D.documentElement.scrollLeft, D.body.scrollLeft); } else { left = el.offsetLeft; parentNode = el.offsetParent; if (parentNode != el) { while (parentNode) { left += parentNode.offsetLeft; parentNode = parentNode.offsetParent; } } } return left; }, getPageY: function(el){ var box = null, parentNode = null, top = 0; if (el.getBoundingClientRect) { box = el.getBoundingClientRect(); top = box.top + Math.max(D.documentElement.scrollTop, D.body.scrollTop); } else { top = el.offsetTop; parentNode = el.offsetParent; if (parentNode != el) { while (parentNode) { top += parentNode.offsetTop; parentNode = parentNode.offsetParent; } } } return top; } }; }(); YHover.photos('container','img'); 复制代码
运行代码 复制代码 另存代码
function YPhotos(container, samples){ var D = document, Container = D.getElementById(container), Samples = Container.getElementsByTagName(samples), i, len = Samples.length, Overlayer = null, oSelf = this; for (i = 0; i < len; ++i) { Samples[i].onmouseover = function(){ var imgPath = this.parentNode.href, imgAlt = this.alt, bigImg = '<img src="' + imgPath + '" alt="' + imgAlt + '" />', pageX = oSelf.getPageX(this), pageY = oSelf.getPageY(this), viewportWidth = oSelf.getViewportWidth(), viewportHeight = oSelf.getViewportHeight(), layerWidth = 0, layerHeight = 0; if (!Overlayer) { Overlayer = D.createElement('div'); Overlayer.id = 'overlayer'; D.body.appendChild(Overlayer); } else { Overlayer.style.display = 'block'; } layerWidth = Overlayer.offsetWidth; layerHeight = Overlayer.offsetHeight; if ((pageX + this.offsetWidth + 5 + layerWidth) > viewportWidth) { pageX -= 5 + layerWidth; } else { pageX += this.offsetWidth + 5; } if ((pageY + this.offsetHeight + 5 + layerHeight) > viewportHeight) { pageY -= 5 + layerHeight; } Overlayer.style.left = pageX + 'px'; Overlayer.style.top = pageY + 'px'; Overlayer.innerHTML = bigImg; }; Samples[i].onmouseout = function(){ Overlayer.style.display = 'none'; Overlayer.innerHTML = ''; }; } } function getViewportWidth(){ var D = document, ua = navigator.userAgent.toLowerCase(), isOpera = (ua.indexOf('opera') > -1), isIE = (!isOpera && ua.indexOf('msie') > -1), j = self.innerWidth, k = D.compatMode; if (k || isIE) { j = (k == "CSS1Compat") ? D.documentElement.clientWidth : D.body.clientWidth; } return j; } function getViewportHeight(){ var D = document, ua = navigator.userAgent.toLowerCase(), isOpera = (ua.indexOf('opera') > -1), isIE = (!isOpera && ua.indexOf('msie') > -1), j = self.innerHeight, k = D.compatMode; if ((k || isIE) && !isOpera) { j = (k == "CSS1Compat") ? D.documentElement.clientHeight : D.body.clientHeight; } return j; } function getPageX(el){ var D = document, box = null, parentNode = null, left = 0; if (el.getBoundingClientRect) { box = el.getBoundingClientRect(); left = box.left + Math.max(D.documentElement.scrollLeft, D.body.scrollLeft); } else { left = el.offsetLeft; parentNode = el.offsetParent; if (parentNode != el) { while (parentNode) { left += parentNode.offsetLeft; parentNode = parentNode.offsetParent; } } } return left; } function getPageY(el){ var D = document, box = null, parentNode = null, top = 0; if (el.getBoundingClientRect) { box = el.getBoundingClientRect(); top = box.top + Math.max(D.documentElement.scrollTop, D.body.scrollTop); } else { top = el.offsetTop; parentNode = el.offsetParent; if (parentNode != el) { while (parentNode) { top += parentNode.offsetTop; parentNode = parentNode.offsetParent; } } } return top; } // 调用 YPhotos('container','img'); 复制代码