点击图片，弹出大图
使用jquery，
实现点击图片在弹出层显示大图，再次点击关闭，加入图片高宽和窗口高宽的大小判断。
1、点击前效果
2、点击后效果
js代码
$(function(){ $("#pimg").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属性 $(bigimg).attr("src", src);//设置#bigimg元素的src属性 /*获取当前点击图片的真实大小，并显示弹出层及大图*/ $("<img/>").attr("src", src).load(function(){ var windowW = $(window).width();//获取当前窗口宽度 var windowH = $(window).height();//获取当前窗口高度 var realWidth = this.width;//获取图片真实宽度 var realHeight = this.height;//获取图片真实高度 var imgWidth, imgHeight; var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放 if(realHeight>windowH*scale) {//判断图片高度 imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放 imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度 if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度 imgWidth = windowW*scale;//再对宽度进行缩放 } } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度 imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放 imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度 } else {//如果图片真实高度和宽度都符合要求，高宽不变 imgWidth = realWidth; imgHeight = realHeight; } $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放 var w = (windowW-imgWidth)/2;//计算图片与窗口左边距 var h = (windowH-imgHeight)/2;//计算图片与窗口上边距 $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性 $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg }); $(outerdiv).click(function(){//再次点击淡出消失弹出层 $(this).fadeOut("fast"); }); }
html代码
<img id="pimg" class="exi_img" alt="" style="width:100%; height:100%;" src="<%= basePath%>/${fj.filePath}"> <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;"> <div id="innerdiv" style="position:absolute;"> <img id="bigimg" style="border:5px solid #fff;" src=""/> </div> </div>
将标红处的路径写入自己的图片路径即可，以上两段代码即可实现点击图片弹出大图片的功能。
因为我的图片是从后台传到页面然后循环出来的，所以随以上方法进行了见到处理。如下标红处：
<%@ page contentType="text/html; charset=UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> <%@ taglib uri="/WEB-INF/tld/JSPTools.tld" prefix="my"%> <% response.setHeader("Cache-Control", "no-store"); response.setHeader("Pragrma", "no-cache"); response.setDateHeader("Expires", 0); String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; String tip = (String) request.getSession(true).getAttribute("tip"); request.getSession(true).removeAttribute("tip"); %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta HTTP-EQUIV="expires" CONTENT="0" /> <meta HTTP-EQUIV="pragma" CONTENT="no-cache" /> <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="<%=path%>/dist/css/public.css"> <link rel="stylesheet" type="text/css" href="<%=path%>/dist/css/main.css"> <script type="text/javascript" src="<%=path%>/js/jquery.min1.js"></script> <script type="text/javascript" src="<%=path%>/js/laytpl-v1.1/laytpl.js"></script> <script type="text/javascript" src="<%=path%>/js/layer-v1.8.5/layer.min.js"></script> <script type="text/javascript" src="<%=path%>/js/My97DatePicker/WdatePicker.js"></script> <script type="text/javascript" src="<%=path%>/js/common/base64.js"></script> <script type="text/javascript" src="<%=path%>/js/common/header.js"></script> <script type="text/javascript" src="<%=path%>/js/common/index.js"></script> <script type="text/javascript" src="<%=path%>/js/extra/list.js"></script> <style type='text/css'> .p-tipe { line-height: 32px; text-indent: 22px; width: 80%; font-size: 14px; } h2 { width: 100%; text-align: center; margin: 10px 0; } .zj-div { width: 80%; } .zj-div h3 { width: 100%; text-align: center; margin: 10px 0; } .zj-div p { line-height: 32px; text-indent: 22px; margin: 3px 0; font-size: 14px; } .zj-div p b { color: #000; font-weight: bold; font-size: 15px; } .exi_img:hover{ transform: scale(1.2)} </style> <script type="text/javascript"> $(function() { InitPage("#equform"); $("#a1").removeClass("aa"); $("#a0").removeClass("aa"); $("#a2").removeClass("aa"); $("#a3").addClass("aa"); $("#a4").removeClass("aa"); }); function showSbcs(){ var sblxId=$("#etype_id").val(); var id=$("#equId").val(); //alert(sblxId); //alert(id) if(sblxId==null){ alert("请选择设备类型！"); } DoSite('<%=path%>/equ/to_sbcsview.htm?id=' + id); } function change(cs){ //alert(cs) var qcq="#pimg"+cs; //$(qcq)获取id为pimg+cs的整个对象 imgShow("#outerdiv", "#innerdiv", "#bigimg", $(qcq)); /* $("#pimg"+cs).click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 imgShow("#outerdiv", "#innerdiv", "#bigimg", _this); }); */ } /* $(function(){ $("#pimg").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属性 $(bigimg).attr("src", src);//设置#bigimg元素的src属性 /*获取当前点击图片的真实大小，并显示弹出层及大图*/ $("<img/>").attr("src", src).load(function(){ var windowW = $(window).width();//获取当前窗口宽度 var windowH = $(window).height();//获取当前窗口高度 var realWidth = this.width;//获取图片真实宽度 var realHeight = this.height;//获取图片真实高度 var imgWidth, imgHeight; var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放 if(realHeight>windowH*scale) {//判断图片高度 imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放 imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度 if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度 imgWidth = windowW*scale;//再对宽度进行缩放 } } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度 imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放 imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度 } else {//如果图片真实高度和宽度都符合要求，高宽不变 imgWidth = realWidth; imgHeight = realHeight; } $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放 var w = (windowW-imgWidth)/2;//计算图片与窗口左边距 var h = (windowH-imgHeight)/2;//计算图片与窗口上边距 $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性 $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg }); $(outerdiv).click(function(){//再次点击淡出消失弹出层 $(this).fadeOut("fast"); }); } </script> <title>${PAGE_TITLE}</title> </head> <body class="px_bodybg"> <div class="main"> <%@include file="/WEB-INF/views/include/menu1.jsp"%> <div class="content"> <div class="cont_nav"> <ul> <li class="active"><a href="<%=path%>/equ/to_view.htm">设备介绍</a></li> <%-- <li><a href="<%= path%>/equ/to_sbcsview.htm?id=${equ.id}">设备规格属性</a></li> --%> <%-- <li><a href="<%= path%>/sbbp/list.htm?id=${equId}">设备备品信息</a></li> --%> <li><a href="<%= path%>/theory/to_view.htm?equId=${equ.id}">设备原理介绍</a></li> <li><a href="<%= path%>/operation/to_view.htm?equId=${equ.id}">设备操作指南</a></li> <li><a href="<%= path%>/question/to_view.htm?equId=${equ.id}">常见问题手册</a></li> <li><a href="<%= path%>/media/to_view.htm?equId=${equ.id}">设备操作视频</a></li> <%-- <li><a href="<%= path%>/threeD/to_view.htm?equId=${equ.id}">3d</a></li> --%> <li><a href="<%=path%>/threeD/to_view.htm?equId=${equ.id}">设备3D浏览</a></li> <li><a href="#">设备资源分布</a></li> </ul> <div class="form_button" style="float: right;"> <a href="javascript:void(0);" onclick="DoSite('<%=path%>/equ/list.htm?Id=${Id}')">返回列表</a> </div> </div> <div id="equform" class="add-div-table"> <input name='args_' type='hidden' value='${args_}' /> <input id="equId" name="id" type="hidden" value="${equ.id}" /> <input id="etype_id" name="etype_id" type="hidden" value="${equ.etype.id}" /> <input name='createTime' type='hidden' value='${my:dateFormat(manuf.createTime,"yyyy-MM-dd HH:mm:ss")}' /> <h3><span style="color:#108af1">1.设备简介</span></h3> <table border="0" cellpadding="0" cellspacing="0" class="from_table"> <tr> <td align="right" width="20%">设备名称：</td> <td width="30%">${equ.ename }</td> <td width="0%" class="td_White"> </td> <td align="right" width="20%">设备类型：</td> <td width="30%">${equ.etype.dname }</td> </tr> <tr> <td align="right" width="20%">设备型号：</td> <td width="30%">${equ.num }</td> <td width="0%" class="td_White"> </td> <td align="right" width="20%">设备厂商：</td> <td width="30%">${equ.stype.dname }</td> </tr> <tr> <td align="right" width="20%">设备功能：</td> <td width="30%">${equ.fuction }</td> <td width="0%" class="td_White"> </td> <td align="right" width="20%"></td> <td width="30%"></td> </tr> </table> <h3><span style="color:#108af1">2.相关图片</span></h3> <c:if test="${fj != null}"> <c:forEach varStatus="vsta" var="fj" items="${fj}"> <div style="float:left; width:256px; margin-right:10px;margin-bottom:10px;height:256px; border:solid 1px #ccc;"> <img id="pimg${vsta.index }" class="exi_img" alt="" onclick="change(${vsta.index });" style="width:100%; height:100%;" src="<%= basePath%>/${fj.filePath}"> </div> <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;"> <div id="innerdiv" style="position:absolute;"> <img id="bigimg" style="border:5px solid #fff;" src=""/> </div> </div> </c:forEach> </c:if> </div> <div class="clear"></div> <h3><span style="color:#108af1">3.技术规格</span></h3> <div class="add-div-table"> <form id="info_frm" action="<%=path%>/equ/do_sbcssave.htm?sblxId=${sblxId}" method="post" enctype="multipart/form-data"> <input name='args_' type='hidden' value='${args_}' /> <input name="equId" type="hidden" value="${equ.id}" /> <table border="0" cellpadding="0" cellspacing="0" class="from_table" style="width:50%;float:left;"> <c:forEach items="${list}" var="list" varStatus="vsta"> <c:if test="${(vsta.index+1)%2!=0}"> <tr> <td align="right" width="20%" colspan="1">${list}：</td> <td width="30%" align="left" colspan="4"> ${list1[vsta.count-1]} </td> </tr> </c:if> </c:forEach> </table> <table border="0" cellpadding="0" cellspacing="0" class="from_table" style="width:50%;float:left;"> <c:forEach items="${list}" var="list" varStatus="vsta"> <c:if test="${(vsta.index+1)%2==0}"> <tr> <td align="right" width="20%" colspan="1">${list}：</td> <td width="30%" align="left" colspan="4"> ${list1[vsta.count-1]} </td> </tr> </c:if> </c:forEach> </table> </form> </div> <div class="clear"></div> <h3><span style="color:#108af1">4.配套设备</span></h3> <div class="dt_l"> <table class="modu_table" cellpadding="0" cellspacing="0"> <tr> <td width="6%">序号</td> <td width="18%">设备名称</td> <td width="18%">设备型号</td> <td width="18%">生产厂商</td> <td width="14%">设备类型</td> <td width="12%">操作</td> </tr> <c:forEach var="item" varStatus="vsta" items="${elist}"> <c:if test="${(vsta.index+1)%2 == 0}"> <tr class="odd"> </c:if> <c:if test="${(vsta.index+1)%2 == 1}"> <tr class="even"> </c:if> <td>${(rpage.currPage-1) * rpage.perNum + vsta.index+1}</td> <td onclick="DoSite('<%=path%>/equ/to_view.htm?id=${item.id}');">${item.ename}</td> <td>${item.num}</td> <td>${item.stype.dname}</td> <td>${item.etype.dname}</td> <td class=".cdclass"><a href="javascript:void(0);" onclick="DoSite('<%=path%>/equ/to_view.htm?id=${item.id}');">查看</a> <%-- <a href="<%=path%>/equ/to_edit.htm?id=${item.id}">编辑</a> <a href="javascript:void(0);" onclick="DoDel('<%=path%>/equ/do_del.htm?id=${item.id}');">删除</a> --%> </td> </c:forEach> </table> </div> <h3><span style="color:#108af1">5.零件列表</span></h3> <div class="dt_l"> <table class="modu_table" cellpadding="0" cellspacing="0"> <tr> <td width="6%">序号</td> <td width="18%">备品名称</td> <td width="18%">设备编号</td> <td width="18%">规格型号</td> <td width="14%">备品厂商</td> <td width="12%">操作</td> </tr> <c:forEach var="item" varStatus="vsta" items="${bp}"> <c:if test="${(vsta.index+1)%2 == 0}"> <tr class="odd"> </c:if> <c:if test="${(vsta.index+1)%2 == 1}"> <tr class="even"> </c:if> <td>${(rpage.currPage-1) * rpage.perNum + vsta.index+1}</td> <td>${item.bpmc}</td> <td>${item.bpbh}</td> <td>${item.bpggxh}</td> <td>${item.bpcs}</td> <td class=".cdclass"> <a href="javascript:void(0);" onclick="DoSite('<%=path%>/sbbp/to_view1.htm?id=${item.id}');">查看</a> <%-- <a href="<%=path%>/sbbp/to_add.htm?id=${item.id}">编辑</a> <a href="javascript:void(0);" onclick="DoDel('<%=path%>/sbbp/do_del.htm?id=${item.id}');">删除</a> --%> </td> </c:forEach> </table> </div> </div> </div> <%@ include file="/WEB-INF/views/include/footer.jsp"%> </div> </body> <script type="text/javascript"> showMenu_header("index2"); function showMenu_header(obj){ var li = document.getElementsByTagName("li"); for(var c=0;c<li.length;c++){ if(li[c].id!=obj){ li[c].getElementsByTagName("a")[0].className = ""; }else if(li[c].id==obj){ li[c].getElementsByTagName("a")[0].className = "active"; li[c].getElementsByTagName("a")[0].style.color = "#ff5e14"; } } }; </script> </html>
