jq移动端图片预览

先看点击图片后的效果，可以左右滑动，放大缩小

             

html

<div id='getRecord'>
   <img src="img/evl.png" alt="">
div>

调用方式

// #getRecord是img标签的父元素，并不支持委托，所以当你的图片是新增的，需要再次调用以下代码，可以写成一个函数调用
$('#getRecord').FlyZommImg({
  rollSpeed: 200,//切换速度
  miscellaneous: false,//是否显示底部辅助按钮
  closeBtn: true,//是否打开右上角关闭按钮
  hideClass: 'hideImg',//不需要显示预览的 class
  imgQuality: 'thumb',//图片质量类型  thumb 缩略图  original 默认原图
  slitherCallback: function (direction, DOM) {//左滑动回调 两个参数 第一个动向 'left,firstClick,close' 第二个 当前操作DOM
    setTimeout(function(){
       // 为了一开始居中显示
      $('.fly-zoom-box-img').css('width','100%').css('height','auto').css('top',0).css('bottom',0).css('margin','auto');
    },300)
  }
});

以下是fly-zomm-img.js，做了一些修改，也为了看到这篇文章的人方便做一些修改，所以不放压缩后的代码

var flyZommImg = function(b, a) {
    this.options = a;
    this._this = b;
    this._activity = false;
    this._opts = {
        imgSum: 0,
        rollSpeed: 200,
        screenHeight: 165,
        showBoxSpeed: 300,
        urlProperty: false,
        miscellaneous: true,
        closeBtn: false,
        hideClass: false,
        imgQuality: "original",
        slitherCallback: function() {}
    }, this._init = function() {
        var c = this;
        c._defaluts();
        c._bind()
    }, this._defaluts = function() {
        var c = $.extend(this._opts, this.options || {});
        this.opts = c;
        return c
    }, this._bind = function() {
        var c = this;
        c._bindDom();
        $("body").on("click", ".fly-zoom-box", function(d) {
            c._hideBox()
        });
        $("body").on("click", ".fly-zoom-box-close", function(d) {
            c._hideBox();
            d.stopPropagation()
        });
        $("body").on("click", ".fly-zoom-box-restore", function(d) {
            c._imgRestore("tap");
            d.stopPropagation()
        });
        $("body").on("click", ".fly-zoom-box-zoomout", function(d) {
            c._zommImg(-100, 1);
            d.stopPropagation()
        });
        $("body").on("click", ".fly-zoom-box-zoom", function(d) {
            c._zommImg(100, 1);
            d.stopPropagation()
        });
        $("body").on("click", ".fly-zoom-box-img", function(d) {
            // c._imgRestore("tap");
            // d.stopPropagation()
        });
        $("body").on("click", ".fly-zoom-box-tool", function(d) {
            d.stopPropagation()
        });
        $("body").on("click", ".fly-zoom-box-label", function(f) {
            var d = $(this);
            var h = d.html();
            if(h && c.groups && c.groups[c.group_name]) {
                c.group_name = h;
                c.opts.imgSum = c.groups[c.group_name].length;
                c.opts.img_index = 0;
                $(".fly-zoom-box-fix").html(1);
                $(".fly-zoom-box-length").html(c.opts.imgSum);
                if(c.opts.urlProperty) {
                    var g = c.groups[c.group_name][0].dom.data(c.opts.urlProperty)
                } else {
                    var g = c.groups[c.group_name][0].dom.attr("src")
                }
                $(".fly-zoom-box-img").attr("src", g);
                $(".fly-zoom-box-label").css({
                    "background": "",
                    "color": "#666"
                });
                d.css({
                    "background": "rgba(62,69,80,1)",
                    "color": "#fff"
                });
                c.oWidth = c.oHeight = null;
                c._imgRestore("oneSwitcher", c.groups[c.group_name][0].dom);
                c.onPinch = c.onRotate = null
            }
            f.stopPropagation()
        })
    }, this._bindDom = function() {
        var f = this;
        f.opts.imgSum = 0;
        f.opts.img_index = 1;
        f.groups = [];
        f.group_names = [];
        f.group_show = false;
        f._this.find("img").each(function(h) {
            var g = $(this);
            if((f.opts.hideClass && !g.hasClass(f.opts.hideClass)) || !f.opts.hideClass) {
                var i = g.data("group");
                if(i) {
                    if(!f.groups[i]) {
                        f.group_names.push(i);
                        f.groups[i] = []
                    }
                    f.groups[i].push({
                        "dom": g
                    });
                    f.group_show = true
                }
                if(!f.group_show) {
                    g.data("index", f.opts.imgSum);
                    f.opts.imgSum += 1
                }
            }
        });
        if(f.group_show) {
            var e = f.group_names;
            for(var d = 0; d < e.length; d++) {
                for(var c = 0; c < f.groups[e[d]].length; c++) {
                    f.groups[e[d]][c].dom.attr("data-index", c)
                }
            }
        }
        this._this.find("img").on("click", function() {
            var g = $(this);
            if((f.opts.hideClass && !g.hasClass(f.opts.hideClass)) || !f.opts.hideClass) {
                f._flyBoxHtml(g);
                f._imgRestore("oneSwitcher", g);
                $("body").on("touchmove", function(h) {
                    h.preventDefault()
                });
                f._touchBind(f);
                if(f._activity) {
                    f.opts.slitherCallback("firstClick", g)
                }
            }
        })
    }, this._reload = function() {
        $("body").unbind("touchmove");
        this._this.find("img").unbind("click");
        this._moveUnBind();
        this._bindDom()
    }, this._flyBoxHtml = function(j) {
        var c = parseInt(j.data("index"));
        if(this.group_show) {
            this.group_name = j.data("group");
            this.opts.imgSum = this.groups[this.group_name].length;
            this.opts.img_index = c
        }
        var f = this.opts.imgSum;
        if(this.opts.urlProperty) {
            var h = j.data(this.opts.urlProperty)
        } else {
            var h = j.attr("src")
        }
        var e = "";
        e += "

相关

标签