点击图片,弹出大图

使用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">&nbsp;</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">&nbsp;</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">&nbsp;</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>&nbsp;
                            <%-- <a href="<%=path%>/equ/to_edit.htm?id=${item.id}">编辑</a>&nbsp; <a
                            href="javascript:void(0);"
                            onclick="DoDel('<%=path%>/equ/do_del.htm?id=${item.id}');">删除</a>&nbsp; --%>
                        </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>&nbsp;
                            <%-- <a href="<%=path%>/sbbp/to_add.htm?id=${item.id}">编辑</a>&nbsp; 
                            <a href="javascript:void(0);" onclick="DoDel('<%=path%>/sbbp/do_del.htm?id=${item.id}');">删除</a>&nbsp; --%>
                        </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>

 

posted @ 2017-10-09 16:14  背着泰山找黄河  阅读(...)  评论(...编辑  收藏