fly_zomm_img.min.js

(function(a){a.fn.FlyZommImg=function(b){return new FlyZommImg(this,b)}})(window.jQuery);function FlyZommImg(b,a){this.options=a;this._this=b;this._init()}FlyZommImg.prototype={_opts:{imgSum:0,rollSpeed:200,screenHeight:165,showBoxSpeed:300},_init:function(){var a=this;a._defaluts();a._bind()},_defaluts:function(){var a=$.extend(this._opts,this.options||{});if(a.imgSum==0){a.imgSum=this._this.find("img").length}this.opts=a;return a},_bind:function(){var a=this;this._this.find("img").on("click",function(){var b=$(this);a._flyBoxHtml(b);a._imgRestore("oneSwitcher",b);$("body").on("touchmove",function(c){c.preventDefault()});a._touchBind(a)});$("body").on("click",".fly-zoom-box",function(){a._hideBox()});$("body").on("click",".fly-zoom-box-close",function(){a._hideBox()});$("body").on("click",".fly-zoom-box-restore",function(b){a._imgRestore("tap");b.stopPropagation()});$("body").on("click",".fly-zoom-box-zoomout",function(b){a._zommImg(-100,1);b.stopPropagation()});$("body").on("click",".fly-zoom-box-zoom",function(b){a._zommImg(100,1);b.stopPropagation()});$("body").on("click",".fly-zoom-box img",function(b){b.stopPropagation()});$("body").on("click",".fly-zoom-box-tool",function(b){b.stopPropagation()})},_flyBoxHtml:function(d){var b="";var c=this.opts.imgSum;var a=d.index();b+="<div class='fly-zoom-box' style=';display: none;-webkit-tap-highlight-color:rgba(255,255,255,0);cursor: pointer;position: fixed;z-index: 9999;width:100% ;height:100% ;background: rgba(20,20,20,1);top:0 ;bottom: 0;right:0 ;left:0 ;'>"+"<div class='fly-zoom-box-number' style='z-index: 999999;position: absolute;top: 0;padding: 20px 0 ;line-height: 26px;color: #ddd;font-size: 14px;width: 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'>"+(a+1)+"</span>/"+c+"</span></div>"+"<div class='fly-zoom-box-main' style='z-index: auto;position: relative;width: 100%;height: 100%;overflow: auto'><img class='fly-zoom-box-img' data-index='"+a+"' style='display: block;width: 100%;position: absolute;' src='"+d.attr("src")+"'></div>"+"<div class='fly-zoom-box-tool' style='z-index: 999999;position: absolute;bottom: 10px;padding: 10px 0 ;width: 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>"+"</div>";this._this.append(b);this._showBox()},_hideBox:function(){$(".fly-zoom-box").hide(this._opts.showBoxSpeed,"linear",function(){$(this).remove()});$("body").unbind("touchmove");this._moveUnBind()},_showBox:function(){$(".fly-zoom-box").show(this._opts.showBoxSpeed)},_rightMove:function(){var a=parseInt($(".fly-zoom-box-img").attr("data-index"));a=a+1;var b=this.opts.imgSum;if(a>=b){a=0}var c=this;var d=this._this.find("img[class!='fly-zoom-box-img']:eq("+(a)+")");$(".fly-zoom-box-fix").html(a+1);$(".fly-zoom-box .fly-zoom-box-img").animate({left:"-100%"},c._opts.rollSpeed,"linear",function(){$(this).remove()});$(".fly-zoom-box").append("<img class='fly-zoom-box-img' data-index='"+a+"'  style='left:100%;display: block;width: 100%;position: absolute;top: 30%' src='"+d.attr("src")+"'>");c._imgRestore("switcher");$(".fly-zoom-box-img").animate({left:"0%"},c._opts.rollSpeed,"linear",function(){c._touchBind(c)});this._moveUnBind(a)},_leftMove:function(){var a=parseInt($(".fly-zoom-box-img").attr("data-index"));a=a-1;var b=this.opts.imgSum;if(a<0){a=(b-1)}var c=this;var d=this._this.find("img[class!='fly-zoom-box-img']:eq("+(a)+")");$(".fly-zoom-box-fix").html(a+1);$(".fly-zoom-box-img").css("left","0");$(".fly-zoom-box .fly-zoom-box-img").animate({left:"100%"},c._opts.rollSpeed,"linear",function(){$(this).remove()});$(".fly-zoom-box").append("<img class='fly-zoom-box-img' data-index='"+a+"'  style='right:100%;display: block;width: 100%;position: absolute;top: 30%' src='"+d.attr("src")+"'>");c._imgRestore("switcher");$(".fly-zoom-box-img").animate({right:"0%"},c._opts.rollSpeed,"linear",function(){c._touchBind(c)});this._moveUnBind()},_moveUnBind:function(){$("body").unbind("touchstart");$("body").unbind("touchend")},_touchBind:function(a){var c,b;$("body").on("touchstart",function(h){var d=h.originalEvent.touches?h.originalEvent.touches[0]:h;a.startX=d.pageX;a.startY=d.pageY;window.clearTimeout(a.longTapTimeout);if(h.originalEvent.touches.length>1){var f=h.originalEvent.touches[1];var i=Math.abs(f.pageX-a.startX);
    var g=Math.abs(f.pageY-a.startY);a.touchDistance=a._getDistance(i,g);a.touchVector={x:f.pageX-a.startX,y:f.pageY-a.startY}}else{a.startTime=a._getTime();a.longTapTimeout=setTimeout(function(){a._emitEvent("longtap")},800);if(a.previousTouchPoint){if(Math.abs(a.startX-a.previousTouchPoint.startX)<10&&Math.abs(a.startY-a.previousTouchPoint.startY)<10&&Math.abs(a.startTime-a.previousTouchTime)<500){a._emitEvent("doubletap")}}a.previousTouchTime=a.startTime;a.previousTouchPoint={startX:a.startX,startY:a.startY}}});$("body").on("touchmove",function(n){var o=a._getTime();if(n.originalEvent.touches.length>1){if(a.touchVector){var f={x:n.originalEvent.touches[1].pageX-n.originalEvent.touches[0].pageX,y:n.originalEvent.touches[1].pageY-n.originalEvent.touches[0].pageY};var j=a._getRotateAngle(f,a.touchVector);if(j>30){a._emitEvent("rotate");a.touchVector.x=f.x;a.touchVector.y=f.y}else{var i=Math.abs(n.originalEvent.touches[0].pageX-n.originalEvent.touches[1].pageX);var d=Math.abs(n.originalEvent.touches[1].pageY-n.originalEvent.touches[1].pageY);var m=a._getDistance(i,d);if(a.touchDistance){var g=m/a.touchDistance;var h=g-a.previousPinchScale;a._emitEvent("pinch",{scale:h});a.previousPinchScale=g}}}}else{window.clearTimeout(a.longTapTimeout);var p=n.originalEvent.touches?n.originalEvent.touches[0]:n;var l=a.moveX===null?0:p.pageX-a.moveX;var k=a.moveY===null?0:p.pageY-a.moveY;a._emitEvent("move",{"deltaX":l,"deltaY":k});a.moveX=p.pageX;a.moveY=p.pageY}n.preventDefault()});$("body").on("touchend",function(f){window.clearTimeout(a.longTapTimeout);var d=a._getTime();c=a.moveX-a.startX;b=a.moveY-a.startY;if(a.moveX!==null&&Math.abs(c)>10||a.moveY!==null&&Math.abs(b)>10){if(Math.abs(c)>Math.abs(b)&&c>70){a._emitEvent("left")}else{if(Math.abs(c)>Math.abs(b)&&c<-70){a._emitEvent("right")}else{if(Math.abs(b)>Math.abs(c)&&b>70){a._emitEvent("bottom")}else{if(Math.abs(b)>Math.abs(c)&&b<-70){a._emitEvent("top")}else{if(d-a.startTime<500){a._emitEvent("swipe")}}}}}}else{if(d-a.startTime<2000){if(d-a.startTime<500){a._emitEvent("tap")}}}a._emitEvent("touchend")})},_zommImg:function(d,f){if(f<=0){if(isNaN(d)||Math.abs(d)>0.2||Math.abs(d)<0.02){return false}}var e=$(".fly-zoom-box-img");var l=e.width();var b=e.height();var g=window.screen.width;var c=window.screen.height-this._opts.screenHeight;if(f<=0){d=d*2;var i=l+l*d;var a=b+b*d;var k=(g-i)/2;var j=(c-a)/2}else{var i=l+d;var a=b*(i/l);if(i<g){return false}if(d>0){this.onPinch=true}var k=(g-i)/2;var j=(c-a)/2}e.width(i);e.height(a);e.css({"top":j+"px","left":k+"px"});return e},_getTime:function(){return new Date().getTime()},_getDistance:function(b,a){return Math.sqrt(b*b+a*a)},_getRotateDirection:function(b,a){return b.x*a.y-a.x*b.y},_getRotateAngle:function(g,e){var h=this._getRotateDirection(g,e);h=h>0?-1:1;var c=this._getDistance(g.x,g.y);var b=this._getDistance(e.x,e.y);var d=c*b;if(d===0){return 0}var a=g.x*e.x+g.y*e.y;var f=a/d;if(f>1){f=1}if(f<-1){f=-1}return Math.acos(f)*h*180/Math.PI},_imgRestore:function(j,g){var i=this;var c=$(".fly-zoom-box-img");var d=window.screen.width;var b=window.screen.height-i._opts.screenHeight;var l=(d-i.oWidth)/2;var f=(b-i.oHeight)/2;if(j=="tap"){c.css({"top":f+"px","left":l+"px"});c.width(i.oWidth);c.height(i.oHeight);i.onPinch=i.onRotate=null}else{if(j=="touchend"){if(c.width()<d){c.animate({"top":f+"px","left":l+"px","width":this.oWidth,"height":this.oHeight},80,"linear",function(){i.onPinch=i.onRotate=null})}}else{if(j=="switcher"){c.height(b/2);var k=(d-c.width())/2;var e=(b-c.height())/2;c.css({"top":e+"px"});i.oWidth=c.width();i.oHeight=c.height()}else{if(j=="oneSwitcher"){c.height(b/2);var a=(b-c.height())/2;c.css({"top":a+"px"});i.oWidth=g.width();i.oHeight=c.height()}}}}},_emitEvent:function(b,h){var g=this;switch(b){case"tap":if(!g.isPinch&&!g.isRotate){g.onTap=true;if((window.screen.height-g.startY)>200){g._imgRestore("tap")}return false}break;case"doubletap":g.onDoubletap=true;break;case"longtap":g.onLongtap=true;break;case"swipe":g.onSwipe=true;break;case"move":if(g.onPinch){g.onMove=true;var c=$(".fly-zoom-box-img");var f=parseInt(c.css("top"));var e=parseInt(c.css("left"));var a=f+h.deltaY;var d=e+h.deltaX;c.css({"top":a+"px","left":d+"px"})}break;case"pinch":g.onPinch=true;g.isPinch=true;g._zommImg(h.scale,0);break;case"rotate":g.isRotate=true;g.onRotate=true;break;case"left":if(!g.onPinch&&!g.onRotate){g.onLeft=true;g._leftMove()}break;case"right":if(!g.onPinch&&!g.onRotate){g.onRight=true;g._rightMove()}break;case"top":if(!g.onPinch&&!g.onRotate){g.onTop=true}break;case"bottom":if(!g.onPinch&&!g.onRotate){g.onBottom=true}break;case"touchend":g._imgRestore("touchend");g.isPinch=g.isRotate=g.startX=g.startY=g.moveX=g.moveY=g.touchDistance=null;g.previousPinchScale=1;break}}};