电子相册系统（七）查看原图

1. 功能说明

当用户双击图片或点击右上角的查看原图，那么就应该要将图片的实际大小都显示出来。同时，我们要求显示的时候要在背景加蒙板，当用户点击蒙板后原图就要渐渐地消失。如图所示。

2. 构思实现

这个功能我们可能要借助css的设来实现，CSS的作用就是定义<div/>标签的class的属性，让<div/>显示有我们要的样式，包括蒙板的样式。因此，我们就需要两个的<div/>，一个用来显示蒙板，一个用来显示蒙板上的图片。同时，还要通过javaScript的fadeIn()和fadeOut()来实现这个功能。

3. 具体实现

1) 在html上这定义两个<div/>的标签，同时还要定义个<img/>的标签，用于显示图片。注意要写上class的值。

<div class="resImgDiv" ></div>
<div class="reshow" ><img id="resimg"></img></div>

2) CSS来设计我们想要的样式。

.resImgDiv
{
display:none;
position:fixed;
width:100%;
height:100%;
background:#000;
z-index:2;
top:0;
left:0;
opacity:0.5;
}
.reshow{
display:none;
width:500px;
height:300px;
position:fixed;
top:20%;
margin-top:-150px;
background:#fff;
z-index:3;
left:30%;
margin-left:-250px;
}

3) 在javaScript中添加要显示的功能。

//打开上传窗口
function resourceImg()
{
$('.resImgDiv').fadeIn(200);
$('.reshow').fadeIn(400);
// 向getPhoto发送异步、GET请求
$.getScript("resshowImg");
}

//点击蒙板任意地方，蒙板消失，图片也消失
$(function(){

$('.resImgDiv').click(function(){
$('.resImgDiv').fadeOut(800);
$('.reshow').fadeOut(800);
});
});

4) 别忘了我们业务层也要重新获取当前图片的原图大小，用于在客户端显示。

@WebServlet(urlPatterns="/resshowImg")
public class ResourceImgServlet extends BaseServlet
{

@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
HttpSession session = request.getSession(true);
String img = (String) session.getAttribute("curImg");
response.setContentType("text/javascript;charset=gbk");
//获取输出流
PrintWriter out = response.getWriter();
out.println("$('#resimg').attr('src' , 'uploadfiles/" + img + "');");
}

}