点击图片弹出放大预览

在需要使用点击预览大图的位置调用 view ();

<style>
   .testView{position: fixed;width: 100%;height: 100%;background-color: rgba(0,0,0,.8);top: 0;left:0;z-index: 999;}
   .testView .close{position: absolute;top: 0;right: 0;width: 50px;height: 50px;display: inline-block;background-color: rgba(255,255,255,0.5);color: #fff;text-align: center;font-style: normal;line-height: 50px;font-size: 30px;cursor: pointer;}
   .viewWrap{height: 600px;width: 100%;text-align: center;line-height: 600px;position: absolute;top: 50%;margin-top: -200px;}

   .testView .v_btn{display: block;width: 50px;height: 300px;color: #fff;text-align: center;line-height: 300px;position: absolute;left:0;top: 50%;margin-top: -150px;font-size: 30px;background-color: rgba(255,255,255,0.2);transition: all 0.3s ease;}
   .testView .next{left: auto;right: 0 !important;}
   .testView>a:hover{background-color: rgba(255,255,255,0.5);}
</style>
<div id="test" class="testView hide">
   <i id="close" class="close">X</i>
   <div class="viewWrap"><img class="reImg" height="400" width="600"></div>
   <a href="javascript:void(0);" class="v_btn pre"><</a>
   <a href="javascript:void(0);" class="v_btn next">></a>
</div>

<script >
   function view() {
        var paint = new Array();
        $.post('url',function (data) {
            $.each(JSON.parse(data),function(paintkey,paintval){
                paint.push(paintval.img);
            });
            preview(paint);
        });
   }

    var testView   = $('.testView');

   function preview(img) {
        var reImg     = testView.find('.reImg');
        var itemNum    = 0;

        if(Array.isArray(img) && img.length > 0){
            if(itemNum == 0){
                itemNum    = 0;
            }else{
                itemNum     = $(this).index();
            }

            reImg.attr('src',img[itemNum]);
            testView.fadeIn(300);
        }

      testView.on('click','a', function () {
         var self = $(this);

         if(self.hasClass('next')){
            itemNum == img.length - 1 ? itemNum = 0 : itemNum++;
            reImg.attr('src',img[itemNum]);
         }else{
            itemNum <= 0 ? itemNum = img.length - 1:itemNum--;
            reImg.attr('src',img[itemNum]);
         }

      });

   }

    testView.on('click','.close', function () {
        $(this).parent().fadeOut(300);
    });
</script>

转载于:https://my.oschina.net/u/3268486/blog/884415