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

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 + "');");
	}
	
}