点击图片放大预览，遮罩屏幕放大展示

功能说明：将图片方格展示，点击某张图片可在当前页面进行预览，点击遮罩屏幕，并且方法显示，点击右上角x，放大的图片消失。

效果图如下：

1、引入fancy.js和fancy.css

路径根据项目实际路径改写：

<link href="../static/fancybox/fancybox.css" type="text/css" rel="stylesheet"/>
<script src="../static/fancybox/fancybox.js" type="text/javascript"></script>

关于这两个文件以及其中用到的图片，我将其上传至csdn,可以下载（本想不用积分可以下载，但是编辑没找到可以自定义下载积分的。。。如果读者有需要的可以邮箱联系我：[email protected]）：

https://download.csdn.net/download/luuvyjune/11100319

 

2、html片段：

<div class="container">
   <div class="content-box">
     <div class="text-box">
       <ul class="ul-qualification">
        <c:forEach items="${fn:split(article.image,'|')}" var="img" varStatus="xh">
          <li class="mid">
            <div class="img-box">
              <a href="${img}" class="fancybox" title="风景如画" rel="group746">
                 <img onload="resizeImg(this, 280, 190)" src="${img}" alt=""></a>
             </div>
             <div class="video-title" title="风景如画">风景如画</div>
          </li>
        </c:forEach>
      </ul>
    </div>
  </div>
</div>

2、css布局：

<style>
        .container .content-box {
            width: 100%;
            height: auto;
            /*padding-left: 180px;*/
            box-sizing: border-box;
            padding-bottom: 20px;
        }

        .container .content-box .text-box {
            width: 100%;
            height: auto;
            overflow: hidden;
            margin-top: 20px;
            text-align: justify;
        }

        .container .content-box .text-box ul.ul-qualification {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .container .content-box .text-box ul.ul-qualification li {
            width: 290px;
            height: 245px;
            float: left;
            margin-bottom: 35px;
            border: 1px solid #b6b2b3;
            box-shadow: 3px 3px 8px #999;
        }

        .container .content-box .text-box ul.ul-qualification li.mid {
            margin: 0 26px 35px 10px;
        }

        .container .content-box .text-box ul.ul-qualification li .img-box {
            width: 275px;
            height: 185px;
            box-sizing: border-box;
            margin: 10px auto 0 auto;
        }

        .container .content-box .text-box ul.ul-qualification li .video-title {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 16px;
            color: #000;
            box-sizing: border-box;
        }
    </style>

3、js片段：

<script type="text/javascript">
        $(document).ready(function () {         
            $(".fancybox").fancybox();
        });

        function resizeImg(ImgID, FitWidth, FitHeight) {
            var image = new Image();
            image.src = ImgID.src;
            imgWidth = image.width;
            imgHeight = image.height;

            if (imgWidth > 0 && imgHeight > 0) {
                if (imgWidth < FitWidth && imgHeight < FitHeight) {
                    ImgID.style.marginTop = (FitHeight - imgHeight) / 2 + "px";
                    ImgID.style.marginLeft = (FitWidth - imgWidth) / 2 + "px";
                } else {
                    if (imgWidth >= imgHeight) {
                        //图片宽大于图片高，缩小高度
                        var imgH = (imgHeight * FitWidth) / imgWidth;
                        ImgID.width = FitWidth;
                        ImgID.height = imgH;
                        ImgID.style.marginTop = (FitHeight - imgH) / 2 + "px";
                    } else {
                        //图片宽小于图片高，缩小宽度
                        var imgW = (imgWidth * FitHeight) / imgHeight;
                        ImgID.width = (imgWidth * FitHeight) / imgHeight;
                        ImgID.height = FitHeight;
                        ImgID.style.marginLeft = (FitWidth - imgW) / 2 + "px";
                    }
                }
            }
        }    
    </script>