使用时，只需要在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>