页面代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>放大图片</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script src="local/communication/static/jquery.min.js" charset="utf-8"></script> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> <ul id="imglist"> <li><img id="viewImg2" src="img/1.jpg" width="500px" /></li> <li><img id="viewImg3" src="img/2.jpg" width="500px" /></li> </ul> <!-- 放大后的图片 --> <div id="outerdiv" style="position:fixed;top:0;left:200px;background:rgba(0,0,0,0.7);z-index:2000;width:200%;height:200%;display:none;"><div id="innerdiv" style="position:absolute;width: 200%;height:200%;"><img id="bigimg" style="border:5px solid #fff;width: 520px;;height:350px;" src="" /></div></div> </body> <script type="text/javascript"> //图片放大 $(function(){ $("#viewImg2").click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 imgShow("#outerdiv", "#innerdiv", "#bigimg", _this); }); $("#viewImg3").click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 imgShow("#outerdiv", "#innerdiv", "#bigimg", _this); }); }); function imgShow(outerdiv, innerdiv, bigimg, _this){ var src = _this.attr("src");//获取当前点击的pimg元素中的src属性 $('#outerdiv').attr('display','block'); $(bigimg).attr("src", src);//设置#bigimg元素的src属性 $(outerdiv).fadeIn("fast"); $(outerdiv).click(function(){//再次点击淡出消失弹出层 $(this).fadeOut("fast"); }); } </script> </html>