100分，请以下网站点击图片的效果。一定结贴。小弟我觉得效果很特别
日期：2014-05-18 浏览次数：20505 次
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
是以下网站
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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
