自定义单张图片放大预览功能，可支持手势缩放，依赖jquery

    //zoom预览
    (function($){
        function ZoomService(options){
            this.openZoomTimer =
                this.closeZoomTimer=
                    this.pinchZoomTimer=
                        this.pinchZoomFn = null;
            this.scale =
                this.new_left =
                    this.new_top =
                        this.img_big_w=
                            this.img_big_h=
                                this.offset_l =
                                    this.offset_t=
                                        this.scroll_top =
                                            this.translateY= 0;
            this.el=
                this.wrapper =
                    this.lateShow=
                        this.zoom =
                            this.zoomImg =
                                this.page =
                                    this.zoomBg = null;
            clearTimeout(this.openZoomTimer)
            clearTimeout(this.openZoomTimer)
            this.defaults = {
                isPinchZoom:true,
                bgOpacity:'0.8'
            }

            this.options = $.extend({}, this.defaults, options);

            this.init();
            this.listen();
        }
        ZoomService.prototype.init = function(){
            this.wrapper = document.createElement('div');
            this.wrapper.className = 'zoom-img-wrapper';
            this.zoomBg = document.createElement('div');
            this.zoomBg.className = 'zoom-bg';
            this.zoom  = document.createElement('div');
            this.zoom.className = 'zoom';
            this.page = document.createElement('div');
            this.page.className = 'zoom-page';
            this.zoomImg = document.createElement('img');

            this.zoomBg.style.opacity = this.options.bgOpacity;

            this.zoom.appendChild(this.zoomImg)
            this.page.appendChild(this.wrapper).appendChild(this.zoom);
            this.page.appendChild(this.zoomBg)
            document.body.appendChild(this.page)
        }
        ZoomService.prototype.listen = function(){
            $('body').find("div").eq(0).on("click", '[data-action="zoom"]', $.proxy(function(e){
                this.el = e.target;
                this.zoomIn(this.el)
            }, this))

            this.page.addEventListener('click',$.proxy(this.zoomOut,this),false)
        }

        ZoomService.prototype.zoomIn = function(that){
            $(this.page).show();
            var imgUrl = that.src;
            var init_w =that.width;
            var init_h = that.height;
            var big_w = $(this.wrapper).width();
            var big_h = $(this.wrapper).height();
            this.offset_l = $(that).offset().left - $(this.zoom).parents().offset().left;
            this.offset_t =  $(that).offset().top - $(this.zoom).parents().offset().top;

            if(big_w / init_w > big_h / init_h){
                this.scale = init_h /big_h
            }else{
                this.scale = init_w/big_w
            }
            this.img_big_w = init_w /  this.scale;
            this.img_big_h = init_h /  this.scale;
            this.new_left = (big_w -  this.img_big_w)/2 +'px';
            this.new_top = (big_h -  this.img_big_h)/2 +'px';
//            this.scroll_top = $(window).scrollTop();
            this.translateY =  this.offset_t;

            $(this.zoomImg).attr('src',imgUrl).css({'width': this.img_big_w+'px','height': this.img_big_h+'px'})

            var transformkey = 'translate3d('+  this.offset_l +'px,'+  this.translateY +'px,0) scale('+ this.scale+ ')';
            $(this.zoom).removeClass('zoomOpen').css({'transform':transformkey})
            this.openZoomTimer  = setTimeout($.proxy(function(){
                var transformkey2 = 'translate3d('+  this.new_left +','+ this. new_top+ ',0) scale(1)';
                $('.zoom-img-wrapper .zoom').css({'transform':transformkey2}).addClass('zoomOpen')

                $(this.zoomBg).fadeIn(300)
                setTimeout($.proxy(function(){
                    $(this.lateShow).css('opacity',1)
                },this),200)

            },this),50)

            //  手势放大
            if(this.options.isPinchZoom){
                if($(this.page).find($('.pinch-zoom-container')).length<=0){
                    this.pinchZoomTimer = setTimeout($.proxy(function(){
                        this.pinchZoomFn =  new RTP.PinchZoom(this.wrapper, {tapZoomFactor:1});

                    },this),250)
                }
            }
        }

        ZoomService.prototype.zoomOut = function(){

            var transformkey = 'translate3d('+ this.offset_l +'px,'+ this.translateY +'px,0) scale('+this.scale+ ')';
            $(this.zoom).css({'transform':transformkey}).addClass('zoomOpen')
            $(this.lateShow).css('opacity',0)
            $(this.zoomBg).fadeOut(200)
            if(this.options.isPinchZoom) {
                this.pinchZoomFn.zoomFactor = 1;
                this.pinchZoomFn.offset = {x: 0, y: 0};
                this.pinchZoomFn.update()
            }
            this.closeZoomTimer = setTimeout($.proxy(function(){
                $(this.page).hide()

            },this),300)
        }

        window.ZoomService = ZoomService

    }(jQuery))

引用上面得js，在页面调用

new ZoomService({isPinchZoom:false，bgOpacity：1});
isPinchZoom是否支持手势缩放，若设置为ture需要引入pinchZoom.js,bgOpacity是浮层的背景透明度，可在css里自定义背景色背景图；

需设置css样式如下：

    .zoom-page{
            position: fixed;
            width:100%;
            height:100%;
            top:0;
            left:0;
            display: none;
            z-index:999;
            overflow: hidden;
        }
        .zoom{
            position: fixed;
            -webkit-transform-origin:left top;
            transform-origin:left top;
        }
        .zoomOpen{
            -webkit-transition:transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
            transition:transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
        }
        .zoom-bg{
            position: absolute;
            width:100%;
            height:100%;
            top:0;
            left:0;
            background:#fff;
            display: none;
            z-index:-1;
        }
        .zoom-img-wrapper{
            width:100%;
            height:100%;
        }

pinchZoom.js地址 :  http://manuelstofer.github.io/pinchzoom/

转载于:https://www.cnblogs.com/xunhuang/p/9073325.html