100分，请以下网站点击图片的效果。一定结贴。我觉得效果很特别
是以下网站
http://www.killuakun.com/article.asp?id=376
当点图片时就会，出现我说的效果。
一定结贴，请高手快出手，thank you
[解决办法]
网页中实现关机效果分析
在网页中实现这种效果的原理很简单。创建两个图层，一个为遮盖层，覆盖整个页面，并且显示为灰色；另一个图层作为高亮显示的部分，在遮盖层的上方，这可通过设置图层的z-index属性来设置。当取消关机效果后，只需将这两个图层元素在页面中删除即可。
以下代码实现显示关机效果。
<html>
<head>
<title> AJAX LightBox Sample </title>
<style type= "text/css ">
#lightbox {/*该层为高亮显示层*/
BORDER-RIGHT: #fff 1px solid;
BORDER-TOP: #fff 1px solid;
DISPLAY: block;
Z-INDEX: 9999; /*设置该层在网页的最上端,设置足够大*/
BACKGROUND: #fdfce9; /*设置背景色*/
LEFT: 50%;
MARGIN: -220px 0px 0px -250px;
BORDER-LEFT: #fff 1px solid;
WIDTH: 500px;
BORDER-BOTTOM: #fff 1px solid;
POSITION: absolute;
TOP: 50%;
HEIGHT: 400px;
TEXT-ALIGN: left
}
#overlay {/*该层为覆盖层*/
DISPLAY: block;
Z-INDEX: 9998; /*设置高亮层的下方*/
FILTER: alpha(opacity=80); /*设置成透明*/
LEFT: 0px;
WIDTH: 100%;
POSITION: absolute;
TOP: 0px;
HEIGHT: 100%;
BACKGROUND-COLOR: #000;
moz-opacity: 0.8;
opacity: .80
}
</style>
</head>
<body>
<!--该层为覆盖层 -->
<div id= "overlay "> </div>
<!--该层为高亮显示层 -->
<div id= "lightbox "> </div>
</body>
</html>
需要注意的是，在IE浏览器中如果有 <select> 标记，则该标记不能被覆盖层覆盖，但在其他浏览器中则可以覆盖。图22.3所示的是IE浏览器中 <select> 标记的效果，图22.4所示的是Mozzila Firefox中 <select> 标记的效果。
图22.3 IE浏览器中 <select> 标记
图22.4 Mozzila Firefox浏览器中 <select> 标记
所以在使用IE浏览器时，要先将网页中的 <select> 元素隐藏起来。如以下代码可以用于隐藏页面所有的 <select> 元素。
selects = document.getElementsByTagName( 'select ');
for(i = 0; i < selects.length; i++) {
selects[i].style.visibility = visibility;
}
[解决办法]
http://www.huddletogether.com/projects/lightbox2/
下载
[解决办法]
http://extjs.com/deploy/ext/docs/
兄弟这个效果比那个强多了，开源的
[解决办法]
<script language= "javascript " type= "text/javascript ">
// lightbox_plus.js
// === utilities ===
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 ';
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;
},
[解决办法]
国外牛人开发的一个js框架。
蓝色理想有教程
