jquery实现点击图片放大，缩小效果

1.首先引入样式：

/*****************************js原生放大图片样式*****************************/
        div, ul, li {
            margin: 0px;
            padding: 0px;
            list-style-type: none;
        }
        #Over {
            position: absolute;
            width: 100%;
            z-index: 100;
            left: 0px;
            top: 0px;
        }
        .img {
            width:90%;
            background-color: #FFF;
            height: 90%;
        }
        .content {
            text-align: center;
            width: 800px;
            margin-right: auto;
            margin-left: auto;
        }
        .EnlargePhoto {
            cursor: pointer;
        }
        .TempContainer {
            position: absolute;
            z-index: 101;
            margin-right: 0px;
            margin-left: 0px;
            text-align: center;
            width: 100%;
            cursor: pointer;
        }
        /*****************************js原生放大图片样式*****************************/

2.然后将img标签用div进行包裹：

<div class="content">
    <td id="forCustQty">
         <input id="pic1Url1" type="hidden" value="${dsApply.pic1Url}"/>
         企业资质：<img src="${ctx}${dsApply.pic1Url!''}" class="upImg_img EnlargePhoto" id="pic1Url">
     </td>
     <td>
         <input id="pic2Url2" type="hidden" value="${dsApply.pic2Url}"/>
         制作证明：<img src="${ctx}${dsApply.pic2Url!''}" class="upImg_img EnlargePhoto" id="pic2Url">
     </td>
 </div>
 <div id="Over"></div>

3.js部分：

$(document).ready(function() {
/*****************************js原生放大图片jquery*****************************/
        var ImgsTObj = $('.EnlargePhoto');//class=EnlargePhoto的都是需要放大的图像
        if(ImgsTObj){
            $.each(ImgsTObj,function(){
                $(this).click(function(){
                    var currImg = $(this);
                    CoverLayer(1);
                    var TempContainer = $('<div class=TempContainer></div>');
                    with(TempContainer){
                        appendTo("body");
                        css('top',currImg.offset().top);
                        html('<img border=0 src=' + currImg.attr('src') + '>');
                    }
                    TempContainer.click(function(){
                        $(this).remove();
                        CoverLayer(0);
                    });
                });
            });
        }else{
            return false;
        }
        //================= 使用/禁用蒙层效果 ===========================
        function CoverLayer(tag){
            with($('#Over')){
                if(tag==1){
                    css('height',$(document).height());
                    css('display','block');
                    css('opacity',0.9);
                    css("background-color","#000");
                }else{
                    css('display','none');
                }
            }
        }
        /*****************************js原生放大图片jquery*****************************/
}

4.效果图，黑色底层还挺好看的：