先看点击图片后的效果，可以左右滑动，放大缩小
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 += "<div class='fly-zoom-box' style='touch-action: none;display: none;-webkit-tap-highlight-color:rgba(255,255,255,0);cursor: pointer;position: fixed;z-index: 9999;100% ;height:100% ;background: rgba(20,20,20,1);top:0 ;bottom: 0;right:0 ;left:0 ;'>" + "<div class='fly-zoom-box-number' style='touch-action: none;z-index: 999999;position: absolute;top: 0;padding: 20px 0 ;line-height: 26px;color: #ddd;font-size: 14px; 100%;text-align: center;'><span style='background: rgba(255,255,255,0.2);border-radius: 15px;color: #fff;padding: 0px 6px'><span class='fly-zoom-box-fix'>" + (c + 1) + "</span>/<span class='fly-zoom-box-length'>" + f + "</span></span></div>" + "<div class='fly-zoom-box-main' style='touch-action: none;z-index: auto;position: relative; 100%;height: 100%;overflow: auto'><img class='fly-zoom-box-img' data-index='" + c + "' style='touch-action: none;display: block; 100%;position: absolute;' src='" + h + "'></div>"; if(this.opts.closeBtn) { e += "<div class='fly-zoom-box-close' style='touch-action: none;text-align: center;z-index: 99999999;position: absolute;top: 11px;color: #ddd;font-size: 26px;right: 14px;'>×</div>" } if(this.opts.miscellaneous && this.group_names.length == 0) { e += "<div class='fly-zoom-box-tool' style='touch-action: none;z-index: 999999;position: absolute;bottom: 10px;padding: 10px 0 ; 200px;line-height: 26px;color: #ddd;font-size: 14px;margin: 0 auto;right: 0;left: 0;text-align: center;background: rgba(20,20,20,0.3);border-radius: 50px'><span class='fly-zoom-box-zoomout' style='background: rgba(255,255,255,0.2);border-radius: 15px;color: #fff;padding: 0px 6px'>－</span><span class='fly-zoom-box-restore' style='background: rgba(255,255,255,0.2);border-radius: 15px;color: #fff;padding: 2px 6px;margin: 0 0 0 10px '>还原</span><span class='fly-zoom-box-close' style='background: rgba(255,255,255,0.2);border-radius: 15px;color: #fff;padding: 2px 6px;margin: 0 10px'>关闭</span><span class='fly-zoom-box-zoom' style='background: rgba(255,255,255,0.2);border-radius: 15px;color: #fff;padding: 0px 6px'>＋</span></div>" } if(this.group_names.length > 0 && this.opts.miscellaneous) { e += "<div class='fly-zoom-box-tool' style='touch-action: none;text-align: center;z-index: 999999;position: absolute;bottom: 10px;padding: 10px 0 ;line-height: 26px;color: #ddd;font-size: 12px;margin: 0 auto;right: 0;left: 0;background: rgba(20,20,20,0.3);'>"; var g = this.group_names; for(var d = 0; d < g.length; d++) { e += "<span class='fly-zoom-box-label' style=' max-content;border-radius: 5px;display: inline-block;"; if(g[d] == this.group_name) { e += "background: rgba(62,69,80,1);color: #fff;" } else { e += "color: #666;" } e += "padding: 2px 9px;margin: 5px 10px 0 10px'>" + g[d] + "</span>" } } e += "</div>"; $("body").append(e); this._showBox() }, this._hideBox = function() { $(".fly-zoom-box").hide(this._opts.showBoxSpeed, "linear", function() { $(this).remove() }); $("body").unbind("touchmove"); if(this._activity) { this.opts.slitherCallback("close", $(".fly-zoom-box-img")) } this._moveUnBind(); this._activity = false }, this._showBox = function() { this._activity = true; $(".fly-zoom-box").show(this._opts.showBoxSpeed) }, this._rightMove = function() { var e = this; if(e.group_show) { var c = e.opts.img_index + 1; var d = e.opts.imgSum; if(c >= d) { c = 0 } e.opts.img_index = c; var g = e.groups[e.group_name][c].dom } else { var c = parseInt($(".fly-zoom-box-img").attr("data-index")); c = c + 1; var d = this.opts.imgSum; if(c >= d) { c = 0 } var g = ""; this._this.find("img").each(function() { var h = $(this); if(h.data("index") == c) { g = h; return false } }) } $(".fly-zoom-box-fix").html(c + 1); $(".fly-zoom-box .fly-zoom-box-img").animate({ left: "-200%" }, e._opts.rollSpeed, "linear", function() { $(this).remove() }); if(e.opts.urlProperty) { var f = g.data(e.opts.urlProperty) } else { var f = g.attr("src") } $(".fly-zoom-box-main").append("<img class='fly-zoom-box-img' data-index='" + c + "' style='left:100%;display: block;position: absolute;' src='" + f + "'>"); e._imgRestore("chage", g); $(".fly-zoom-box-img").animate({ left: "0%" }, e._opts.rollSpeed, "linear", function() { e._touchBind(e); e._imgRestore("switcher", g) }); this._moveUnBind(c); if(this._activity) { this.opts.slitherCallback("left", g) } }, this._leftMove = function() { var e = this; if(e.group_show) { var c = e.opts.img_index - 1; var d = e.opts.imgSum; if(c < 0) { c = (d - 1) } e.opts.img_index = c; var g = e.groups[e.group_name][c].dom } else { var c = parseInt($(".fly-zoom-box-img").attr("data-index")); c = c - 1; var d = this.opts.imgSum; if(c < 0) { c = (d - 1) } var g = ""; this._this.find("img").each(function() { var h = $(this); if(h.data("index") == c) { g = h; return false } }) } $(".fly-zoom-box-fix").html(c + 1); $(".fly-zoom-box-main .fly-zoom-box-img").animate({ left: "200%" }, e._opts.rollSpeed, "linear", function() { $(this).remove() }); if(e.opts.urlProperty) { var f = g.data(e.opts.urlProperty) } else { var f = g.attr("src") } $(".fly-zoom-box-main").append("<img class='fly-zoom-box-img' data-index='" + c + "' style='right:100%;display: block;position: absolute;' src='" + f + "'>"); e._imgRestore("chage", g); $(".fly-zoom-box-img").animate({ right: "0%" }, e._opts.rollSpeed, "linear", function() { e._touchBind(e); e._imgRestore("switcher", g) }); this._moveUnBind(); if(e._activity) { this.opts.slitherCallback("right", g) } }, this._moveUnBind = function() { $("body").unbind("touchstart"); $("body").unbind("touchend") }, this._touchBind = function(c) { var e, d; $("body").on("touchstart", function(i) { var f = i.originalEvent.touches ? i.originalEvent.touches[0] : i; c.startX = f.pageX; c.startY = f.pageY; window.clearTimeout(c.longTapTimeout); if(i.originalEvent.touches.length > 1) { var g = i.originalEvent.touches[1]; var j = Math.abs(g.pageX - c.startX); var h = Math.abs(g.pageY - c.startY); c.touchDistance = c._getDistance(j, h); c.touchVector = { x: g.pageX - c.startX, y: g.pageY - c.startY } } else { c.startTime = c._getTime(); c.longTapTimeout = setTimeout(function() { c._emitEvent("longtap") }, 800); if(c.previousTouchPoint) { if(Math.abs(c.startX - c.previousTouchPoint.startX) < 10 && Math.abs(c.startY - c.previousTouchPoint.startY) < 10 && Math.abs(c.startTime - c.previousTouchTime) < 500) { c._emitEvent("doubletap") } } c.previousTouchTime = c.startTime; c.previousTouchPoint = { startX: c.startX, startY: c.startY } } }); $("body").on("touchmove", function(o) { var p = c._getTime(); if(o.originalEvent.touches.length > 1) { if(c.touchVector) { var g = { x: o.originalEvent.touches[1].pageX - o.originalEvent.touches[0].pageX, y: o.originalEvent.touches[1].pageY - o.originalEvent.touches[0].pageY }; var k = c._getRotateAngle(g, c.touchVector); if(k > 30) { c._emitEvent("rotate"); c.touchVector.x = g.x; c.touchVector.y = g.y } else { var j = Math.abs(o.originalEvent.touches[0].pageX - o.originalEvent.touches[1].pageX); var f = Math.abs(o.originalEvent.touches[1].pageY - o.originalEvent.touches[1].pageY); var n = c._getDistance(j, f); if(c.touchDistance) { var h = n / c.touchDistance; var i = h - c.previousPinchScale; c._emitEvent("pinch", { scale: i }); c.previousPinchScale = h } } } } else { window.clearTimeout(c.longTapTimeout); var q = o.originalEvent.touches ? o.originalEvent.touches[0] : o; var m = c.moveX === null ? 0 : q.pageX - c.moveX; var l = c.moveY === null ? 0 : q.pageY - c.moveY; c._emitEvent("move", { "deltaX": m, "deltaY": l }); c.moveX = q.pageX; c.moveY = q.pageY } o.preventDefault() }); $("body").on("touchend", function(g) { window.clearTimeout(c.longTapTimeout); var f = c._getTime(); e = c.moveX - c.startX; d = c.moveY - c.startY; if(c.moveX !== null && Math.abs(e) > 10 || c.moveY !== null && Math.abs(d) > 10) { if(Math.abs(e) > Math.abs(d) && e > 70) { c._emitEvent("left") } else { if(Math.abs(e) > Math.abs(d) && e < -70) { c._emitEvent("right") } else { if(Math.abs(d) > Math.abs(e) && d > 70) { c._emitEvent("bottom") } else { if(Math.abs(d) > Math.abs(e) && d < -70) { c._emitEvent("top") } else { if(f - c.startTime < 500) { c._emitEvent("swipe") } } } } } } else { if(f - c.startTime < 2000) { if(f - c.startTime < 500) { c._emitEvent("tap") } } } c._emitEvent("touchend") }) }, this._zommImg = function(y, c) { if(c <= 0) { if(isNaN(y) || Math.abs(y) > 0.2 || Math.abs(y) < 0.02) { return false } } var l = $(".fly-zoom-box-img"); var k = l.width(); var v = l.height(); var f = window.screen.width; var z = window.screen.height - this._opts.screenHeight; if(c <= 0) { y = y * 2; var i = k + k * y; var r = v + v * y; var g = (f - i) / 2; var s = (z - r) / 2 } else { var i = k + y; var r = v * (i / k); // if(i < f) { // return false // } if(y > 0) { this.onPinch = true } var g = (f - i) / 2; var s = (z - r) / 2 } var e = ""; var d = ""; if(this._opts.imgQuality == "original") { e = l[0].naturalWidth; d = l[0].naturalHeight } else { e = l[0].width; d = l[0].height } var q = document.body.offsetWidth; var m = 50; var j = (z - d) / 2; if(j <= m) { j = 70 } var u = e; var p = d; var x = q / u; var t = u / p; if(t < 1) { var n = z / d * 0.8; u = u * n; p = p * n; if(u < (f * 0.75)) { u = u * (1 - u / (f * 0.75) + 1); p = p * (1 - p / (z * 0.75) + 1) } x = 1 } // if(i < u * x) { // console.log(5555) // return false // } l.width(i); l.height(r); l.css({ "top": s + "px", "left": g + "px" }); return l }, this._getTime = function() { return new Date().getTime() }, this._getDistance = function(d, c) { return Math.sqrt(d * d + c * c) }, this._getRotateDirection = function(d, c) { return d.x * c.y - c.x * d.y }, this._getRotateAngle = function(i, g) { var j = this._getRotateDirection(i, g); j = j > 0 ? -1 : 1; var e = this._getDistance(i.x, i.y); var d = this._getDistance(g.x, g.y); var f = e * d; if(f === 0) { return 0 } var c = i.x * g.x + i.y * g.y; var h = c / f; if(h > 1) { h = 1 } if(h < -1) { h = -1 } return Math.acos(h) * j * 180 / Math.PI }, this._setNumber = function(k, i, h, m, l) { var j; var p; if(k) { if(this._opts.imgQuality == "original") { j = k[0].naturalWidth; p = k[0].naturalHeight } else { j = k[0].width; p = k[0].height } } var c = (h - p) / 2; if(c <= m) { c = 70 } var n = j; var d = p; var g = l / n; var f = n / d; if(f < 1) { var e = h / p * 0.8; n = n * e; d = d * e; if(n < (i * 0.75)) { n = n * (1 - n / (i * 0.75) + 1); d = d * (1 - d / (h * 0.75) + 1) } g = 1 } return { "per": g, "dwidth": n, "dheight": d, "ch": c } }, this._imgRestore = function(m, j) { var l = this; l.cdomthis = j; var f = $(".fly-zoom-box-img"); var g = window.screen.width; var e = window.screen.height - l._opts.screenHeight; var o = (g - l.oWidth) / 2; var i = (e - l.oHeight) / 2; var k = document.body.offsetWidth; var d = document.body.offsetHeight; var n = 50; if(m == "tap") { f.css({ "top": l.oTop + "px", "width": l.oWidth + "px", "height": l.oHeight + "px", "margin": "0 auto", "right": "0%", "left": "0%" }); l.onPinch = l.onRotate = null } else { if(m == "chage") { var c = l._setNumber(j, g, e, n, k); f.css({ "top": c.ch + "px", "width": c.dwidth * c.per + "px", "height": c.dheight * c.per + "px", "margin": "0 auto" }); l.oTop = c.ch; l.oWidth = c.dwidth * c.per; l.oHeight = c.dheight * c.per } else { if(m == "touchend") { if(f.width() < l.oWidth) { var c = l._setNumber(j, g, e, n, k); f.animate({ "top": c.ch + "px", "width": c.oWidth + "px", "height": c.oHeight + "px", "margin": "0 auto", "right": "0%", "left": "0%" }, 80, "linear", function() { l.onPinch = l.onRotate = null }) } } else { if(m == "switcher" || m == "oneSwitcher") { if(m == "oneSwitcher") { var c = l._setNumber(j, g, e, n, k); f.css({ "top": c.ch + "px", "width": c.dwidth * c.per + "px", "height": c.dheight * c.per + "px", "margin": "0 auto", "right": "0%", "left": "0%" }); l.oTop = c.ch; l.oWidth = c.dwidth * c.per; l.oHeight = c.dheight * c.per } else { f.css({ "right": "0%", "left": "0%" }) } } } } } }, this._emitEvent = function(d, j) { var i = this; switch(d) { case "tap": break; case "doubletap": i.onDoubletap = true; break; case "longtap": i.onLongtap = true; break; case "swipe": i.onSwipe = true; break; case "move": if(i.onPinch) { i.onMove = true; var e = $(".fly-zoom-box-img"); var h = parseInt(e.css("top")); var g = parseInt(e.css("left")); var c = h + j.deltaY; var f = g + j.deltaX; e.css({ "top": c + "px", "left": f + "px" }) } break; case "pinch": i.onPinch = true; i.isPinch = true; i._zommImg(j.scale, 0); break; case "rotate": i.isRotate = true; i.onRotate = true; break; case "left": if(!i.onPinch && !i.onRotate) { i.onLeft = true; i._leftMove() } break; case "right": if(!i.onPinch && !i.onRotate) { i.onRight = true; i._rightMove() } break; case "top": if(!i.onPinch && !i.onRotate) { i.onTop = true } break; case "bottom": if(!i.onPinch && !i.onRotate) { i.onBottom = true } break; case "touchend": i._imgRestore("touchend", i.cdomthis); i.isPinch = i.isRotate = i.startX = i.startY = i.moveX = i.moveY = i.touchDistance = null; i.previousPinchScale = 1; break } } }; $.fn.FlyZommImg = function(a) { var b = new flyZommImg(this, a); b._init(); return b };