使用时，只需要在A标签处加上rel="lightbox"即可。e.g: <A href=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpg rel=lightbox><IMG src=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpg height="100" width="100"></A> 我自己也写了一个，不过涉及两个模块，（func.js公用库，和imagesLoader.js图片载入类）过阵子一并发上来。 <STYLE type=text/css> HTML #overlay { FILTER: Alpha(opacity=50); BACKGROUND-IMAGE: url(images/blank.gif); BACKGROUND-COLOR: #000 } </STYLE> <SCRIPT language=javascript type=text/javascript> <!--// function addEvent(object, type, handler) { if (object.addEventListener) { object.addEventListener(type, handler, false); } else if (object.attachEvent) { object.attachEvent(['on',type].join(''),handler); } else { object[['on',type].join('')] = handler; } } function WindowSize() { // window size object this.w = 0; this.h = 0; return this.update(); } WindowSize.prototype.update = function() { var d = document; this.w = (window.innerWidth) ? window.innerWidth : (d.documentElement && d.documentElement.clientWidth) ? d.documentElement.clientWidth : d.body.clientWidth; this.h = (window.innerHeight) ? window.innerHeight : (d.documentElement && d.documentElement.clientHeight) ? d.documentElement.clientHeight : d.body.clientHeight; return this; }; function PageSize() { // page size object this.win = new WindowSize(); this.w = 0; this.h = 0; return this.update(); } PageSize.prototype.update = function() { var d = document; this.w = (window.innerWidth && window.scrollMaxX) ? window.innerWidth + window.scrollMaxX : (d.body.scrollWidth > d.body.offsetWidth) ? d.body.scrollWidth : d.body.offsetWidt; this.h = (window.innerHeight && window.scrollMaxY) ? window.innerHeight + window.scrollMaxY : (d.body.scrollHeight > d.body.offsetHeight) ? d.body.scrollHeight : d.body.offsetHeight; this.win.update(); if (this.w < this.win.w) this.w = this.win.w; if (this.h < this.win.h) this.h = this.win.h; return this; }; function PagePos() { // page position object this.x = 0; this.y = 0; return this.update(); } PagePos.prototype.update = function() { var d = document; this.x = (window.pageXOffset) ? window.pageXOffset : (d.documentElement && d.documentElement.scrollLeft) ? d.documentElement.scrollLeft : (d.body) ? d.body.scrollLeft : 0; this.y = (window.pageYOffset) ? window.pageYOffset : (d.documentElement && d.documentElement.scrollTop) ? d.documentElement.scrollTop : (d.body) ? d.body.scrollTop : 0; return this; }; function UserAgent() { // user agent information var ua = navigator.userAgent; this.isWinIE = this.isMacIE = false; this.isGecko = ua.match(/Gecko//); this.isSafari = ua.match(/AppleWebKit/); this.isOpera = window.opera; if (document.all && !this.isGecko && !this.isSafari && !this.isOpera) { this.isWinIE = ua.match(/Win/); this.isMacIE = ua.match(/Mac/); this.isNewIE = (ua.match(/MSIE 5.5/) || ua.match(/MSIE 6.0/)); } return this; } // === lightbox === function LightBox(option) { var self = this; self._imgs = new Array(); self._wrap = null; self._box = null; self._open = -1; self._page = new PageSize(); self._pos = new PagePos(); self._ua = new UserAgent(); self._expandable = false; self._expanded = false; self._expand = option.expandimg; self._shrink = option.shrinkimg; return self._init(option); } LightBox.prototype = { _init : function(option) { var self = this; var d = document; if (!d.getElementsByTagName) return; var links = d.getElementsByTagName("a"); for (var i=0;i<links.length;i++) { var anchor = links[i]; var num = self._imgs.length; if (!anchor.getAttribute("href") || anchor.getAttribute("rel") != "lightbox") continue; // initialize item self._imgs[num] = {src:anchor.getAttribute("href"),w:-1,h:-1,title:'',cls:anchor.className}; if (anchor.getAttribute("title")) self._imgs[num].title = anchor.getAttribute("title"); else if (anchor.firstChild && anchor.firstChild.getAttribute && anchor.firstChild.getAttribute("title")) self._imgs[num].title = anchor.firstChild.getAttribute("title"); anchor.onclick = self._genOpener(num); // set closure to onclick event } var body = d.getElementsByTagName("body")[0]; self._wrap = self._createWrapOn(body,option.loadingimg); self._box = self._createBoxOn(body,option); return self; }, _genOpener : function(num) { var self = this; return function() { self._show(num); return false; } }, _createWrapOn : function(obj,imagePath) { var self = this; if (!obj) return null; // create wrapper object, translucent background var wrap = document.createElement('div'); wrap.id = 'overlay'; with (wrap.style) { display = 'none'; position = 'fixed'; top = '0px'; left = '0px'; zIndex = '50'; width = '100%'; height = '100%'; } if (self._ua.isWinIE) wrap.style.position = 'absolute'; addEvent(wrap,"click",function() { self._close(); }); obj.appendChild(wrap); // create loading image, animated image var imag = new Image; imag.onload = function() { var spin = document.createElement('img'); spin.id = 'loadingImage'; spin.src = imag.src; spin.style.position = 'relative'; self._set_cursor(spin); addEvent(spin,'click',function() { self._close(); }); wrap.appendChild(spin); imag.onload = function(){}; }; if (imagePath != '') imag.src = imagePath; return wrap; }, _createBoxOn : function(obj,option) { var self = this; if (!obj) return null; // create lightbox object, frame rectangle var box = document.createElement('div'); box.id = 'lightbox'; with (box.style) { display = 'none'; position = 'absolute'; zIndex = '60'; } obj.appendChild(box); // create image object to display a target image var img = document.createElement('img'); img.id = 'lightboxImage'; self._set_cursor(img); addEvent(img,'click',function(){ self._close(); }); addEvent(img,'mouseover',function(){ self._show_action(); }); addEvent(img,'mouseout',function(){ self._hide_action(); }); box.appendChild(img); var zoom = document.createElement('img'); zoom.id = 'actionImage'; with (zoom.style) { display = 'none'; position = 'absolute'; top = '15px'; left = '15px'; zIndex = '70'; } self._set_cursor(zoom); zoom.src = self._expand; addEvent(zoom,'mouseover',function(){ self._show_action(); }); addEvent(zoom,'click', function() { self._zoom(); }); box.appendChild(zoom); addEvent(window,'resize',function(){ self._set_size(true); }); // close button if (option.closeimg) { var btn = document.createElement('img'); btn.id = 'closeButton'; with (btn.style) { display = 'inline'; position = 'absolute'; right = '10px'; top = '10px'; width = '15px'; height = '15px'; zIndex = '80'; } btn.src = option.closeimg; self._set_cursor(btn); addEvent(btn,'click',function(){ self._close(); }); box.appendChild(btn); } // caption text var caption = document.createElement('span'); caption.id = 'lightboxCaption'; with (caption.style) { display = 'none'; position = 'absolute'; zIndex = '80'; } box.appendChild(caption); // create effect image if (!option.effectpos) option.effectpos = {x:0,y:0}; else { if (option.effectpos.x == '') option.effectpos.x = 0; if (option.effectpos.y == '') option.effectpos.y = 0; } var effect = new Image; effect.onload = function() { var effectImg = document.createElement('img'); effectImg.id = 'effectImage'; effectImg.src = effect.src; if (option.effectclass) effectImg.className = option.effectclass; with (effectImg.style) { position = 'absolute'; display = 'none'; left = [option.effectpos.x,'px'].join('');; top = [option.effectpos.y,'px'].join(''); zIndex = '90'; } self._set_cursor(effectImg); addEvent(effectImg,'click',function() { effectImg.style.display = 'none'; }); box.appendChild(effectImg); }; if (option.effectimg != '') effect.src = option.effectimg; return box; }, _set_photo_size : function() { var self = this; if (self._open == -1) return; var imag = self._box.firstChild; var targ = { w:self._page.win.w - 30, h:self._page.win.h - 30 }; var orig = { w:self._imgs[self._open].w, h:self._imgs[self._open].h }; // shrink image with the same aspect var ratio = 1.0; if ((orig.w >= targ.w || orig.h >= targ.h) && orig.h && orig.w) ratio = ((targ.w / orig.w) < (targ.h / orig.h)) ? targ.w / orig.w : targ.h / orig.h; imag.width = Math.floor(orig.w * ratio); imag.height = Math.floor(orig.h * ratio); self._expandable = (ratio < 1.0) ? true : false; if (self._ua.isWinIE) self._box.style.display = "block"; self._box.style.top = [self._pos.y + (self._page.win.h - imag.height - 30) / 2,'px'].join(''); self._box.style.left = [((self._page.win.w - imag.width - 30) / 2),'px'].join(''); self._show_caption(true); }, _set_size : function(onResize) { var self = this; if (self._open == -1) return; self._page.update(); self._pos.update(); var spin = self._wrap.firstChild; if (spin) { var top = (self._page.win.h - spin.height) / 2; if (self._wrap.style.position == 'absolute') top += self._pos.y; spin.style.top = [top,'px'].join(''); spin.style.left = [(self._page.win.w - spin.width - 30) / 2,'px'].join(''); } if (self._ua.isWinIE) { self._wrap.style.width = [self._page.win.w,'px'].join(''); self._wrap.style.height = [self._page.h,'px'].join(''); } if (onResize) self._set_photo_size(); }, _show_action : function() { var self = this; if (self._open == -1 || !self._expandable) return; var obj = document.getElementById('actionImage'); if (!obj) return; obj.src = (self._expanded) ? self._shrink : self._expand; obj.style.display = 'inline'; }, _hide_action : function() { var self = this; var obj = document.getElementById('actionImage'); if (obj) obj.style.display = 'none'; }, _zoom : function() { var self = this; if (self._expanded) { self._set_photo_size(); self._expanded = false; } else if (self._open > -1) { var imag = self._box.firstChild; self._box.style.top = [self._pos.y,'px'].join(''); self._box.style.left = '0px'; imag.width = self._imgs[self._open].w; imag.height = self._imgs[self._open].h; self._show_caption(false); self._expanded = true; } self._show_action(); }, _show_caption : function(enable) { var self = this; var caption = document.getElementById('lightboxCaption'); if (!caption) return; if (caption.innerHTML.length == 0 || !enable) { caption.style.display = 'none'; } else { // now display caption var imag = self._box.firstChild; with (caption.style) { top = [imag.height + 10,'px'].join(''); // 10 is top margin of lightbox left = '0px'; width = [imag.width + 20,'px'].join(''); // 20 is total side margin of lightbox height = '1.2em'; display = 'block'; } } }, _show : function(num) { var self = this; var imag = new Image; if (num < 0 || num >= self._imgs.length) return; var loading = document.getElementById('loadingImage'); var caption = document.getElementById('lightboxCaption'); var effect = document.getElementById('effectImage'); self._open = num; // set opened image number self._set_size(false); // calc and set wrapper size self._wrap.style.display = "block"; if (loading) loading.style.display = 'inline'; imag.onload = function() { if (self._imgs[self._open].w == -1) { // store original image width and height self._imgs[self._open].w = imag.width; self._imgs[self._open].h = imag.height; } if (effect) { effect.style.display = (!effect.className || self._imgs[self._open].cls == effect.className) ? 'block' : 'none'; } if (caption) caption.innerHTML = self._imgs[self._open].title; self._set_photo_size(); // calc and set lightbox size self._hide_action(); self._box.style.display = "block"; self._box.firstChild.src = imag.src; self._box.firstChild.setAttribute('title',self._imgs[self._open].title); if (loading) loading.style.display = 'none'; }; self._expandable = false; self._expanded = false; imag.src = self._imgs[self._open].src; }, _set_cursor : function(obj) { var self = this; if (self._ua.isWinIE && !self._ua.isNewIE) return; obj.style.cursor = 'pointer'; }, _close : function() { var self = this; self._open = -1; self._hide_action(); self._wrap.style.display = "none"; self._box.style.display = "none"; } }; // === main === addEvent(window,"load",function() { var lightbox = new LightBox({ loadingimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/loading.gif', expandimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/expand.gif', shrinkimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/shrink.gif', effectimg:'images/zzoop.gif', effectpos:{x:-40,y:-20}, effectclass:'images/effectable', closeimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/close.gif' }); }); //--> </SCRIPT> <A href=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpg rel=lightbox><IMG src=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpg height="100" width="100"></A> <a href="http://blog.never-online.net/article.asp?id=83" target="_blank">click here for back点击返回</a>

　　推荐阅读

　　In Javascript Class, how to call the prototype method.(three method)

1、Using Javascript eval Method。 2、using a veriables save object "this" reference. 3、in innerHTML, we can using String to pass the prototype Method。 e.g. <SCRIPT LANGUAGE="JavaScript"> <!-- func>>>详细阅读

本文标题：sina的lightbox效果。

地址：http://www.17bianji.com/kaifa2/JS/31148.html

 1/2    1