先看点击图片后的效果,可以左右滑动,放大缩小
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);