+ })();🌲image preview example
1.Generated by query selector
HTML:
<div class="imageWraper">
<img data-src="/testImage/main_body3.png" src="/testImage/main_body3.png">
<img data-src="/testImage/phone20190624.png" src="/testImage/phone20190624.png">
diff --git a/example/image-preview/test2.1.1.js b/example/image-preview/test2.1.1.js
new file mode 100644
index 0000000..36d9d9c
--- /dev/null
+++ b/example/image-preview/test2.1.1.js
@@ -0,0 +1 @@
+(()=>{var t={572:(t,e,i)=>{"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.Rotate=e.Zoom=e.Move=void 0;var n=i(730);Object.defineProperty(e,"Move",{enumerable:!0,get:function(){return n.Move}});var r=i(704);Object.defineProperty(e,"Zoom",{enumerable:!0,get:function(){return r.Zoom}});var o=i(841);Object.defineProperty(e,"Rotate",{enumerable:!0,get:function(){return o.Rotate}})},730:(t,e)=>{"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.Move=void 0;var i=function(){function t(){}return t.prototype.handleMove=function(t){var e=this;if(t.preventDefault(),2==t.touches.length)return clearTimeout(this.performerClick),void this.handleZoom(t);var i=this.actionExecutor.IsBoundaryLeft,n=this.actionExecutor.isBoundaryRight,r=i||n;if(t.touches[0].clientX-this.startXForDirection!=0){var o=t.touches[0].clientX-this.startXForDirection>0?"right":"left",s=this.actionExecutor.viewRect,a=s.left,h=s.right,c=this.actionExecutor.viewWidth/this.actionExecutor.dpr;if(this.fingerDirection)if(this.actionExecutor.isEnlargement)if(a>=0&&h<=c)if("right"!=o&&"left"!=o&&!this.isEnlargeMove||"horizontal"!=this.fingerDirection)this.handleMoveEnlage(t);else{this.isEnlargeMove=!0,this.handleMoveNormal(t);var l="resetEnlargeMove";this.addTouchEndTask(l,{priority:1,callback:function(){e.isEnlargeMove=!1}})}else i&&"right"==o||n&&"left"==o||this.isEnlargeMove?(this.isEnlargeMove=!0,this.handleMoveNormal(t),l="resetEnlargeMove",this.addTouchEndTask(l,{priority:1,callback:function(){return e.isEnlargeMove=!1}})):this.handleMoveEnlage(t);else this.handleMoveNormal(t);else{if(this.actionExecutor.isEnlargement&&(a<0||h>c)||!this.actionExecutor.isEnlargement)return void(!this.actionExecutor.isEnlargement||r||this.normalMoved?this.actionExecutor.isEnlargement?(r||this.normalMoved)&&(this.normalMoved?this.handleMoveNormal(t):"right"==o?i?this.handleMoveNormal(t):this.handleMoveEnlage(t):"left"==o&&n?this.handleMoveNormal(t):this.handleMoveEnlage(t)):this.handleMoveNormal(t):this.handleMoveEnlage(t));if(this.getMovePoints(t),this.movePoints.lengtho?p:0,i=Math.round(l)<0||Math.round(u)>s?g:0,e.eventsHanlder.handleMoveEnlage(n,i,0),this.addTouchEndTask("handleTendEnlarte",{priority:10,callback:this.handleTEndEnlarge.bind(this)}),this.startX=d,this.startY=f}},t.prototype.autoMove=function(t,e,i,n){var r=n.maxTop,o=n.minTop,s=n.maxLeft,a=n.minLeft,h=this.imgContainer.getBoundingClientRect(),c=h.width,l=h.height,u=this.actionExecutor,d=u.viewRect,f=u.eventsHanlder,p=d,g=p.top,m=p.bottom,v=p.left,x=p.right;t=t/180*Math.PI;var w=e+300*Math.cos(t),y=i+300*Math.sin(t);w>s?w=s:wr?y=r:y=0&&x<=c||(M=w-e),g>=0&&m<=l||(b=y-i),f.moveCurPlaneTo(M,b,0)},t}();e.Move=i},841:function(t,e){"use strict";var i=this&&this.__awaiter||function(t,e,i,n){return new(i||(i=Promise))((function(r,o){function s(t){try{h(n.next(t))}catch(t){o(t)}}function a(t){try{h(n.throw(t))}catch(t){o(t)}}function h(t){var e;t.done?r(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,a)}h((n=n.apply(t,e||[])).next())}))},n=this&&this.__generator||function(t,e){var i,n,r,o,s={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return o={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function a(o){return function(a){return function(o){if(i)throw new TypeError("Generator is already executing.");for(;s;)try{if(i=1,n&&(r=2&o[0]?n.return:o[0]?n.throw||((r=n.return)&&r.call(n),0):n.next)&&!(r=r.call(n,o[1])).done)return r;switch(n=0,r&&(o=[2&o[0],r.value]),o[0]){case 0:case 1:r=o;break;case 4:return s.label++,{value:o[1],done:!1};case 5:s.label++,n=o[1],o=[0];continue;case 7:o=s.ops.pop(),s.trys.pop();continue;default:if(!((r=(r=s.trys).length>0&&r[r.length-1])||6!==o[0]&&2!==o[0])){s=0;continue}if(3===o[0]&&(!r||o[1]>r[0]&&o[1]{"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.Zoom=void 0;var i=function(){function t(){}return t.prototype.handleZoom=function(t){if(!(this.isNormalMove&&this.normalMoved||this.isAnimating||this.actionExecutor.isLoadingError())){this.isZooming||(this.curStartPoint1={x:this.curPoint1.x,y:this.curPoint1.y},this.curStartPoint2={x:this.curPoint2.x,y:this.curPoint2.y}),this.isZooming=!0,this.isAnimating=!0;var e=this.actionExecutor,i=Math.pow(this.curPoint1.x-this.curPoint2.x,2)+Math.pow(this.curPoint1.y-this.curPoint2.y,2),n=Math.pow(t.touches[0].clientX-t.touches[1].clientX,2)+Math.pow(t.touches[0].clientY-t.touches[1].clientY,2),r=(this.curStartPoint1.x+this.curStartPoint2.x)/2,o=(this.curStartPoint1.y+this.curStartPoint2.y)/2,s=e.viewWidth/(2*e.dpr),a=e.viewHeight/(2*e.dpr);this.curPoint1.x=t.touches[0].clientX,this.curPoint1.y=t.touches[0].clientY,this.curPoint2.x=t.touches[1].clientX,this.curPoint2.y=t.touches[1].clientY;var h=0,c=0,l=1,u=1;if(i>n)c=(o-a)*this.zoomScale,h=(r-s)*this.zoomScale,l=1-this.zoomScale,u=1-this.zoomScale;else{if(!(i{"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.easeInOut=e.easeOut=e.easeIn=e.ease=e.linear=e.cubicBezier=void 0;var i=function(){function t(t,e,i,n){this.cachedY=new Map,this.precision=1e-5,this.p1={x:t,y:e},this.p2={x:i,y:n}}return t.prototype.getX=function(t){var e=this.p1.x,i=this.p2.x;return 3*e*t*Math.pow(1-t,2)+3*i*Math.pow(t,2)*(1-t)+Math.pow(t,3)},t.prototype.getY=function(t){var e=this.p1.y,i=this.p2.y;return 3*e*t*Math.pow(1-t,2)+3*i*Math.pow(t,2)*(1-t)+Math.pow(t,3)},t.prototype.solveCurveX=function(t){for(var e,i,n,r=t,o=this.p1.x,s=this.p2.x,a=3*o-3*s+1,h=3*s-6*o,c=3*o,l=0;l<8;l++){if(i=this.getX(r)-t,Math.abs(i)d;){if(i=this.getX(r)-t,Math.abs(i)0?u=r:d=r,r=(u+d)/2}return r},t.prototype.solve=function(t){return this.cachedY.get(t)||this.cachedY.set(t,this.getY(this.solveCurveX(t))),this.cachedY.get(t)},t}();e.cubicBezier=i,e.linear=new i(0,0,1,1),e.ease=new i(.25,.1,.25,1),e.easeIn=new i(.42,0,1,1),e.easeOut=new i(0,0,.58,1),e.easeInOut=new i(.42,0,.58,1)},755:function(t,e,i){"use strict";var n=this&&this.__decorate||function(t,e,i,n){var r,o=arguments.length,s=o<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,i,n);else for(var a=t.length-1;a>=0;a--)(r=t[a])&&(s=(o<3?r(s):o>3?r(e,i,s):r(e,i))||s);return o>3&&s&&Object.defineProperty(e,i,s),s},r=this&&this.__awaiter||function(t,e,i,n){return new(i||(i=Promise))((function(r,o){function s(t){try{h(n.next(t))}catch(t){o(t)}}function a(t){try{h(n.throw(t))}catch(t){o(t)}}function h(t){var e;t.done?r(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(s,a)}h((n=n.apply(t,e||[])).next())}))},o=this&&this.__generator||function(t,e){var i,n,r,o,s={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return o={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function a(o){return function(a){return function(o){if(i)throw new TypeError("Generator is already executing.");for(;s;)try{if(i=1,n&&(r=2&o[0]?n.return:o[0]?n.throw||((r=n.return)&&r.call(n),0):n.next)&&!(r=r.call(n,o[1])).done)return r;switch(n=0,r&&(o=[2&o[0],r.value]),o[0]){case 0:case 1:r=o;break;case 4:return s.label++,{value:o[1],done:!1};case 5:s.label++,n=o[1],o=[0];continue;case 7:o=s.ops.pop(),s.trys.pop();continue;default:if(!((r=(r=s.trys).length>0&&r[r.length-1])||6!==o[0]&&2!==o[0])){s=0;continue}if(3===o[0]&&(!r||o[1]>r[0]&&o[1]f?(w=f-m,x=!0):mu?(y=u-g,v=!0):g=0&&l<=n&&(x=!1,w=0),a<=r&&(v=!1,y=0),x||v?(this.isAnimating=!0,[4,e.eventsHanlder.handleTEndEnlarge(t,w,y,0)]):[3,2];case 1:return o.sent(),this.isAnimating=!1,[3,4];case 2:return this.moveEndTime=Date.now(),M={x:this.startX,y:this.startY},b={x:this.touchStartX,y:this.touchStartY},E=M.x-b.x,T=M.y-b.y,P=180*Math.atan2(T,E)/Math.PI,this.moveEndTime-this.moveStartTime<90&&Math.abs(E)+Math.abs(T)>5?(I={maxTop:u,minTop:d,maxLeft:f,minLeft:n-s},this.isAnimating=!0,[4,this.autoMove(P,c,h,I)]):[3,4];case 3:o.sent(),this.isAnimating=!1,o.label=4;case 4:return this.moveStartTime=0,[2]}}))}))},t.prototype.handleTEndEnNormal=function(t){return r(this,void 0,void 0,(function(){var e,i,n;return o(this,(function(r){switch(r.label){case 0:return this.isAnimating?[2]:(e=t.changedTouches[0].clientX,i=this.actionExecutor.eventsHanlder,0==(n=e-this.touchStartX)?[2]:(this.isAnimating=!0,[4,i.handleTEndEnNormal(t,n)]));case 1:return r.sent(),this.isAnimating=!1,[2]}}))}))},t.prototype.genFrame=function(){var t=this,e=this.options.imgs;!e||e.length,this.imgsNumber=e.length,this.curIndex=0;var i='\n \n \n \n '+("pc"==this.envClient?'
\n
':"")+'\n
\n
\n
\n '+("pc"==this.envClient?'
\n
':"")+'\n
\n
\n
\n '+("pc"==this.envClient?'
\n
':"")+'\n
\n
\n
\n '+("pc"==this.envClient?'
\n
':"")+'\n
\n
\n
\n '+("pc"==this.envClient?'
\n
':"")+'\n
\n
\n
\n '+("pc"==this.envClient?'
\n
':"")+'\n
\n
\n
\n '+("pc"==this.envClient?'
\n
':"")+'\n
\n
\n
\n '+("pc"==this.envClient?'
\n
':"")+'\n
\n
\n
\n '+("pc"==this.envClient?'
\n
':"")+'\n
\n
\n
\n '+("pc"==this.envClient?'
\n
':"")+'\n
\n
\n
\n '+("pc"==this.envClient?'
\n
':"")+'\n
\n
\n