css特效二：lightbox

这里让我们先想一下lightbox的原理

无非是一个覆盖全屏的层，加一个内容显示的层

 

 

从HTML的结构来看：

Code
<a href="#" >

<img img src="image/1.jpg" alt="" class=“imglist“/>

<div class="lightbox">

<div class="light"></div>

<div class="box"><img src="image/1.jpg" alt=""/></div>

</div>

</a>

 

<div id="close"></div>

 

 

lightbox:效果的整体区域

light:背景

box:内容区域

 

这样的结构正好利用a:hover来进行我们想要的效果。

 

 

从CSS来看：

Code
/*设置所有元素*/

*{

padding:0;

margin:0 auto;

border:0;

}

 

/*设置内容区域*/

#content{

width:500px;

height:auto;

overflow:auto;

}

 

/*设置列表形式显示的图片大小*/

.imglist{

width:60px;

height:80px;

margin:20px;}

 

/*设置lightbox使其脱离文档流，偏离窗口*/

.lightbox{

position:absolute;

left:-9999px; 

z-index:100;

}

 

/*设置lightbox使其脱离文档*/

.light{

position:absolute;

}

 

/*设置box使其脱离文档*/

.box{

position:absolute;

}

 

/*设置关闭按钮*/

#close {

width:25px; 

height:25px;

background:url(image/close.png);

position:relative;  

z-index:200;

float:right; 

display:inline; 

margin-right:10px;

 

}

 

/*在hover状态下使其全频显示,并使left=-9999修改到0，使其在窗口可见区域*/

a:hover .lightbox

{

left:0;

width:100%; 

height:100%;

}

 

/*在hover状态下使其全频显示为黑色*/

a:hover .lightbox .light 

{

background:#000; 

width:100%; 

height:100%;

}

/*在hover状态下使图片居中显示*/

a:hover .lightbox .box

{

width:100%; 

text-align:center; 

margin-top:150px;

}

 

 

总结：从html的结构变化到css的实现,基本思路与javascriot完成一样。怎样实现hover对事件的模拟是做css特效的关键之一。所有css基础知识和html结构的把握是做css特效的必要条件。

 

文件下载：http://files.cnblogs.com/liuhai250485/lightbox.rar

转载于:https://www.cnblogs.com/liuhai250485/archive/2009/10/30/1593013.html