yz.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  1. ;(function(undefined) {
  2. "use strict"
  3. var _global;
  4. //判断是否为 数组
  5. function isArray(o){
  6. return Object.prototype.toString.call(o)=='[object Array]';
  7. }
  8. //随机数
  9. function getRandomNumber(a,b) {
  10. return Math.round(Math.random()*(b- a) + a)
  11. }
  12. //获取随机图片
  13. function getRandomImg(imgArr) {
  14. return imgArr[getRandomNumber(0,imgArr.length-1)]
  15. }
  16. //判断 是否处于动画状态
  17. function ifAnimate(ele) {
  18. if(ele.is(":animated")){
  19. return true
  20. }else{
  21. return false
  22. }
  23. }
  24. //获取元素的left值
  25. function getEleCssLeft($ele) {
  26. return parseInt($ele.css('left'));
  27. }
  28. var RotateVerify = function (ele,opt) {
  29. this.$ele = $(ele);
  30. //默认参数
  31. this.defaults = {
  32. initText:'滑动将图片转正',
  33. slideImage:'',
  34. slideAreaNum:10,
  35. getSucessState:function(){
  36. }
  37. }
  38. this.settings = $.extend({}, this.defaults, opt);
  39. this.init();
  40. }
  41. RotateVerify.prototype = {
  42. constructor: this,
  43. init:function () {
  44. this.verifyState = false;
  45. this.disLf = 0;
  46. this.initDom();
  47. this.initCanvasImg();
  48. this.initMouse();
  49. this._touchstart();
  50. this._touchend();
  51. },
  52. initDom:function () {
  53. this.statusBg = this.$ele.find('.statusBg');
  54. this.$slideDragWrap = this.$ele.find('.slideDragWrap');
  55. this.$slideDragBtn = this.$ele.find('.slideDragBtn');
  56. this.rotateCan = this.$ele.find('.rotateCan');
  57. this.cTipsTxt = this.$ele.find('.cTipsTxt');
  58. this.controlBorWrap = this.$ele.find('.controlBorWrap');
  59. this.xPos = this.rotateCan[0].width/2;
  60. this.yPos = this.rotateCan[0].height/2;
  61. this.aveRot = Math.round((360/(this.$slideDragWrap.width() - this.$slideDragBtn.outerWidth())) * 100 )/100;
  62. // window.$slideDragWrap = this.$slideDragWrap
  63. // console.log(this.$slideDragWrap)
  64. // console.log(this.$slideDragWrap.width(),this.$slideDragBtn.outerWidth(),this.aveRot)
  65. this.rotateImgCan = this.rotateCan[0].getContext('2d');
  66. this.slideImage = document.createElement('img');
  67. this.setAttrSrc();
  68. },
  69. initCanvasImg:function () {
  70. this.randRot = getRandomNumber(30,270);
  71. this.sucLenMin = (360 - this.settings.slideAreaNum - this.randRot) * (this.$slideDragWrap.width() - this.$slideDragBtn.width())/360;
  72. this.sucLenMax = (360 + this.settings.slideAreaNum - this.randRot) * (this.$slideDragWrap.width() - this.$slideDragBtn.width())/360;
  73. this.disLf = 0;
  74. this.initImgSrc();
  75. },
  76. initImgSrc:function(){
  77. var _this = this;
  78. _this.slideImage.src = _this.slideImage.getAttribute('data-src');
  79. _this.setAttrSrc();
  80. _this.slideImage.onload = function(){
  81. _this.slideImage.style.width = _this.xPos * 2 + 'px';
  82. _this.slideImage.style.height = _this.yPos * 2 + 'px';
  83. _this.drawImgCan();
  84. }
  85. },
  86. drawImgCan:function(val){
  87. var _this = this;
  88. _this.rotateImgCan.beginPath();
  89. _this.rotateImgCan.arc( _this.xPos, _this.yPos, _this.xPos, 0, 360 * Math.PI / 180, false );
  90. _this.rotateImgCan.closePath();
  91. _this.rotateImgCan.clip();
  92. _this.rotateImgCan.save();
  93. _this.rotateImgCan.clearRect(0,0,_this.xPos * 2,_this.yPos * 2);
  94. _this.rotateImgCan.translate(_this.xPos, _this.yPos);
  95. _this.rotateImgCan.rotate(this.randRot * Math.PI / 180 + _this.disLf * _this.aveRot * Math.PI / 180);
  96. _this.rotateImgCan.translate(-_this.xPos, -_this.yPos);
  97. _this.rotateImgCan.drawImage( _this.slideImage, 0, 0, _this.xPos*2, _this.yPos*2);
  98. _this.rotateImgCan.restore();
  99. },
  100. initMouse:function () {
  101. var _this = this ;
  102. var ifThisMousedown = false;
  103. _this.$slideDragBtn.on('mousedown',function (e) {
  104. if(_this.verifyState){
  105. return false;
  106. }
  107. if(_this.dragTimerState){
  108. return false;
  109. }
  110. if(ifAnimate(_this.$slideDragBtn)){
  111. return false;
  112. }
  113. ifThisMousedown = true;
  114. var positionDiv = $(this).offset();
  115. var distenceX = e.pageX - positionDiv.left;
  116. var disPageX = e.pageX;
  117. _this.$slideDragBtn.addClass('control-btn-active');
  118. _this.controlBorWrap.addClass('control-bor-active');
  119. $(document).mousemove(function (e) {
  120. if(!ifThisMousedown){
  121. return false;
  122. }
  123. var x = e.pageX - disPageX;
  124. if(x<0){
  125. x=0;
  126. }else if(x >=(_this.$slideDragWrap.width()-_this.$slideDragBtn.outerWidth())){
  127. x = _this.$slideDragWrap.width()-_this.$slideDragBtn.outerWidth();
  128. }
  129. _this.$slideDragBtn.css({
  130. 'left':x + 'px'
  131. })
  132. _this.controlBorWrap.css({
  133. 'width':x + _this.$slideDragBtn.width() + 'px'
  134. })
  135. _this.disLf = x;
  136. _this.drawImgCan();
  137. e.preventDefault();
  138. })
  139. });
  140. $(document).on('mouseup',function(){
  141. if(!ifThisMousedown){
  142. return false;
  143. }
  144. ifThisMousedown = false;
  145. if(_this.verifyState){
  146. return false;
  147. }
  148. $(document).off('mousemove');
  149. _this.$slideDragBtn.removeClass('control-btn-active');
  150. _this.controlBorWrap.removeClass('control-bor-active');
  151. if(_this.sucLenMin <= _this.disLf && _this.disLf <= _this.sucLenMax){
  152. _this.$slideDragBtn.addClass('control-btn-suc');
  153. _this.controlBorWrap.addClass('control-bor-suc');
  154. _this.statusBg.fadeIn();
  155. _this.statusBg.addClass('icon-dagou');
  156. _this.verifyState = true;
  157. _this.cTipsTxt.text("");
  158. if(_this.settings.getSuccessState){
  159. _this.settings.getSuccessState(_this.verifyState);
  160. }
  161. }else{
  162. _this.$slideDragBtn.addClass('control-btn-err');
  163. _this.controlBorWrap.addClass('control-bor-err');
  164. _this.$slideDragWrap.addClass('control-horizontal');
  165. _this.dragTimerState = true;
  166. _this.verifyState = false;;
  167. _this.statusBg.fadeIn();
  168. _this.statusBg.addClass('icon-guanbi1');
  169. _this.$slideDragBtn.delay(700).animate({
  170. left:'0px'
  171. },function(){
  172. _this.dragTimerState = false;
  173. _this.$slideDragWrap.removeClass('control-horizontal');
  174. _this.$slideDragBtn.removeClass('control-btn-err');
  175. _this.statusBg.removeClass('icon-guanbi1');
  176. _this.statusBg.fadeOut();
  177. _this.refreshSlide();
  178. })
  179. _this.controlBorWrap.delay(700).animate({
  180. width:_this.$slideDragBtn.width() + 'px'
  181. },function(){
  182. _this.controlBorWrap.removeClass('control-bor-err');
  183. });
  184. }
  185. });
  186. },
  187. _touchstart:function(){
  188. var _this = this;
  189. _this.$slideDragBtn.on('touchstart',function(e){
  190. _this.$slideDragBtn.css('pointer-events','none');
  191. setTimeout(function(){_this.$slideDragBtn.css('pointer-events','all')},400)
  192. if(_this.dragTimerState || ifAnimate(_this.$slideDragBtn) || _this.verifyState){
  193. return false;
  194. }
  195. if(getEleCssLeft(_this.$slideDragBtn) == 0){
  196. _this.touchX = e.originalEvent.targetTouches[0].pageX;
  197. _this.$slideDragBtn.addClass('control-btn-active');
  198. _this.controlBorWrap.addClass('control-bor-active');
  199. _this._touchmove();
  200. }
  201. })
  202. },
  203. _touchmove:function(){
  204. var _this = this;
  205. _this.$slideDragBtn.on('touchmove',function(e){
  206. e.preventDefault();
  207. if(_this.dragTimerState || ifAnimate(_this.$slideDragBtn)){
  208. return false;
  209. }else{
  210. var x = e.originalEvent.targetTouches[0].pageX - _this.touchX;
  211. if(x<0){
  212. x=0;
  213. }else if(x >=(_this.$slideDragWrap.width()-_this.$slideDragBtn.outerWidth())){
  214. x = _this.$slideDragWrap.width()-_this.$slideDragBtn.outerWidth();
  215. }
  216. _this.$slideDragBtn.css({
  217. 'left':x + 'px'
  218. })
  219. _this.controlBorWrap.css({
  220. 'width':x + _this.$slideDragBtn.width() + 'px'
  221. })
  222. _this.disLf = x;
  223. _this.drawImgCan();
  224. }
  225. })
  226. },
  227. _touchend:function(){
  228. var _this = this;
  229. _this.$slideDragBtn.on('touchend',function(){
  230. _this.$slideDragBtn.off('touchmove');
  231. _this.$slideDragBtn.removeClass('control-btn-active');
  232. _this.controlBorWrap.removeClass('control-bor-active');
  233. if((_this.sucLenMin) <= _this.disLf && _this.disLf <= (_this.sucLenMax)){
  234. _this.verifyState = true;
  235. _this.$slideDragBtn.addClass('control-btn-suc');
  236. _this.controlBorWrap.addClass('control-bor-suc');
  237. _this.statusBg.fadeIn();
  238. _this.statusBg.addClass('icon-dagou');
  239. _this.cTipsTxt.text("");
  240. if(_this.settings.getSuccessState){
  241. _this.settings.getSuccessState(_this.verifyState);
  242. }
  243. }else{
  244. if(!ifAnimate(_this.$slideDragBtn)){
  245. _this.dragTimerState = true;
  246. _this.verifyState = false;
  247. _this.statusBg.fadeIn();
  248. _this.statusBg.addClass('icon-guanbi1');
  249. _this.$slideDragBtn.addClass('control-btn-err');
  250. _this.controlBorWrap.addClass('control-bor-err');
  251. _this.$slideDragWrap.addClass('control-horizontal');
  252. _this.$slideDragBtn.delay(700).animate({
  253. left:'0px'
  254. },function(){
  255. _this.$slideDragWrap.removeClass('control-horizontal');
  256. _this.$slideDragBtn.removeClass('control-btn-err');
  257. _this.statusBg.removeClass('icon-guanbi1');
  258. _this.statusBg.fadeOut();
  259. _this.dragTimerState = false;
  260. _this.refreshSlide();
  261. })
  262. _this.controlBorWrap.delay(700).animate({
  263. width:_this.$slideDragBtn.width() + 'px'
  264. },function(){
  265. _this.controlBorWrap.removeClass('control-bor-err');
  266. });
  267. }else{
  268. return false;
  269. }
  270. }
  271. })
  272. },
  273. setAttrSrc:function(){
  274. if(isArray(this.settings.slideImage)){
  275. this.slideImageSrc = getRandomImg(this.settings.slideImage);
  276. }else{
  277. this.slideImageSrc = this.settings.slideImage;
  278. }
  279. this.slideImage.setAttribute("data-src",this.slideImageSrc);
  280. },
  281. refreshSlide:function(){
  282. var _this = this;
  283. _this.initCanvasImg();
  284. },
  285. resetSlide:function(){
  286. var _this = this;
  287. _this.$slideDragBtn.css({
  288. left:'0px'
  289. })
  290. _this.controlBorWrap.css({
  291. width:_this.$slideDragBtn.width() + 'px'
  292. })
  293. _this.controlBorWrap.removeClass('control-bor-suc');
  294. _this.dragTimerState = false;
  295. _this.verifyState = false;;
  296. _this.$slideDragBtn.removeClass('control-btn-suc');
  297. _this.$slideDragWrap.removeClass('control-horizontal');
  298. _this.statusBg.fadeOut();
  299. _this.statusBg.removeClass('icon-dagou');
  300. _this.cTipsTxt.text(_this.settings.initText);
  301. _this.refreshSlide();
  302. }
  303. }
  304. var inlineCss = '*{margin:0;padding:0;box-sizing:border-box;}.rotateverify-contaniner{margin:0 auto;}@-webkit-keyframes rotateverifyHorizontal{0%{-webkit-transform:translate(0px,0);-ms-transform:translate(0px,0);transform:translate(0px,0)}10%,30%,50%,70%,90%{-webkit-transform:translate(-1px,0);transform:translate(-1px,0)}20%,40%,60%,80%{-webkit-transform:translate(1px,0);transform:translate(1px,0)}100%{-webkit-transform:translate(0px,0);transform:translate(0px,0)}}@-moz-keyframes rotateverifyHorizontal{0%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);transform:translate(0px,0)}10%,30%,50%,70%,90%{-webkit-transform:translate(-1px,0);-moz-transform:translate(-1px,0);transform:translate(-1px,0)}20%,40%,60%,80%{-webkit-transform:translate(1px,0);-moz-transform:translate(1px,0);transform:translate(1px,0)}100%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);transform:translate(0px,0)}}@keyframes rotateverifyHorizontal{0%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);transform:translate(0px,0)}10%,30%,50%,70%,90%{-webkit-transform:translate(-1px,0);-moz-transform:translate(-1px,0);transform:translate(-1px,0)}20%,40%,60%,80%{-webkit-transform:translate(1px,0);-moz-transform:translate(1px,0);transform:translate(1px,0)}100%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);transform:translate(0px,0)}}.rotateverify-contaniner .control-horizontal{-webkit-animation:rotateverifyHorizontal .6s .2s ease both;-moz-animation:rotateverifyHorizontal .6s .2s ease both;animation:rotateverifyHorizontal .6s .2s ease both}.rotateverify-contaniner .rotate-can-wrap{position:relative;}.rotateverify-contaniner .status-bg{width:100%;height:100%;position:absolute;top:0;left:0;background-color:rgba(0,0,0,.3);background-repeat:no-repeat;background-position:center center;border-radius:100%;display:none;}.rotateverify-contaniner .status-bg.icon-dagou{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH4AAABWCAYAAAAJ3CLTAAAAAXNSR0IArs4c6QAABFZJREFUeAHtncuO00AQRWdALFkiXsM0Az/FArGIhPg3EAvEazEL4AdY824eQsBXhNsTW1gmiduu6vct6cp20qmuuiftOMkoc3DAqM6B9Xq9gp5Dvzq5/VV1jbKhjQOAewSdQrvC3XeVflXkAIAeQ593ER/cflpR22230kH/MoA7tbs637Zl5XfvoKOL19DJjG4uEPwMt3IbuhC6a+PiudyaYT1+Dgign01A8H4+ZzVKCh3NvCX4rJBOF6MA3U3yeHomjsjGAQcdmnP1juH/Bd/OZUPUoxDg04DunjTXPabjkBwcUITu3voxSnCA0EugpFwjoSsbWkI6Qi+BknKNStDdFzZ8TVdmEyydIvQbwYpkYl0HCF3XzyKyEXoRmHSLJHRdP4vIRuhFYNItktB1/SwiG6EXgUm3SEA3kPRbNvc+nW/ZdNGEy9ZBt9hKgtDDIdLPDNIGspAkCF0fTbiMIG0gC0mC0MMh0s8M0gaykCQIXR9NuIwgbSALSYLQwyHSzwzSBrKQJAhdH024jCBtIAtJgtDDIdLPDNIGspAkCF0fTbiMIG0gC0mC0MMh0s8M0gaykCTiQ0e1d6CH0KdOj9xt+hbVlxE+GegrJAnne7yPYTHZJejJnordfZfrw6XTEbwxkIUkERe6ax3Vut9ImYp3GMCf0Rg9V+CJgSwkiSTQ786omPAH4OGbgSwkifjQu9X+dGbVhL85Sxr4Zmd6Nx6eBnoH/ue4Go/jpuHDHwNZSBIO+tHgBBJ3F5P/WVh9k/DhlYEsJIm00LsV/1LQQVPw4ZOBLCSJ9NA78A8kXeCx76Hqr/bRo4E03qenO70PX0zQzCH0BpJE1SsfxhjIQpLIY6WP4Bt09EPSFR5b5cpHXwaqZ6UPwXen/NtoUAq/qpUPP25WDb1/EqBJDfhVrPxmoBN+78DZR9htrPR/LW/2Wl75za10wm94pe+A/x2rQBJFvOajwTZP72Po/TEMcRd8VcMn9J72aFszfEIfwR4fwqBbkMbKvzbOneqY0D2drwk+oXtC74fVAJ/Qe5oztyXDV4L+EXny+JZtJjvx8BLhE7oY+yZBSfAJXQl6n6YE+ITe01Le5gyf0JVhj9PlCF8ROv+dxxj48Dgn+IQ+JBNhPwf4hB4B9LYpUsIn9G1EIt6mBP8D8nh/tk/oEQHvmyomfMx1Akn/GtZ9IscLuX1Qfe+LAb+D/g1bSRC6L1TfcaCh8ZXu1tM+cruVTui+MGKPCwGf0GNTXDifJnxCXwgh1cM6+NJTszvta+TghVzMJ4ISfKRZHLyQiwl8OBeQaVyULSFP6EMQKfYTwCf0FKC3zRkRvrsu4Gv6NgipbosAn9BTwZ2aNyB8Qp8yP/X9AeATemqovvMrwid0X9NzGacAn9BzgTm3DgF8Qp9rdm7jF8An9NwgLq1nBnxCX2pyro8D/GPoFbQr3M+yXsm1ftYlcABgD6H70AvoN+R+dfsZdE+QttmH/gVo1WKZD73PfwAAAABJRU5ErkJggg==);}.rotateverify-contaniner .status-bg.icon-guanbi1{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGoAAABqCAYAAABUIcSXAAAAAXNSR0IArs4c6QAABOhJREFUeAHt3F1O3DAUBeCZ7qJQUVXdQ6U+tUtBILq79okKUEGwAlaACO0DFV1C+0DPzXBnMpnYiR0nsZ1jyXUm/ok5H8wwBbJYVMrz8/MR6nfU3y9Vjo8qQ3gYOAHke4h6ivqIKrlL5seoy51L4eRr1B+opiJ9+zsTecI7AeS5h3phChznr2TM1gVwwoaka93j4GBrIh94JYAc36DeabCWVrBWX1k4kKe7roVYXjSbSQi6K5KanJSz8UieE10KsTa5Ox0hZFckcTlXKHkBcy3EciJaLBCwD5K4PMmlXjleT4e/w8ENFuFrliZiaQVJ8kJ9bxlm7RKoW+sIcyexzNmsewIglT4C9XW9qvsBsSyZBUCS1Tc+WLDLt+cYZix8zaqBISnf16RqyJtvz2V99OyjSth9CrFesBBiCKRC1qn5l1gH6CDWTjJuJwIivTVeGRchljGd9o5RkHQbxNIk3NpRkXRrxNIkurWTIOnWiKVJ2NtJkXRrxNIkmtsokHRrxNIkttuokHRrxNIkVm2USLpFYiWARKyEkOaOFfXTneLU27k9DSaJpGhzwUoaaS5YWSDljpUVUq5YWSLlhpU1Ui5Ys0BKHWtWSKlizRIpNaxZI6WCRSSVQoswovyFGSJVkPQwNiwiqUxDGwsWkRpw6qemxiJSXcTyeCosIllQTF1jYxHJJNHh/FhYROqA0TZkaCwitQk49A+FRSQHhK5DQ2MRqWvyHuMCYn3AWneofUqByea/T/L4+LKagnBC/HfT3z5CmFugEqntMwshhcDCMl6lwCwitSFpP8KaAotICuDSjoxFJBec+tiRsIhUD97n8cBYRPJBMc0ZCItIpsD7nA+MRaQ+GG1zgSVvZvu+T5L5H9uuxX7PBBBuiNvWYJmy3ONf3sLO08I4DaGGRFpRrW4nRCxj6o4dAyERy9HBOnxgJGJZ0+/YORISsTp6NA4bGYlYjQotJydCih7L9y7NLXH7dQsSZt6get/NGHP/ofqWaO+RGw1UIKQHCH1CLXylMC9arB4fU5ipgZ7uCqxT/tAPbYifZ/FNcZU3NJKuTSxNIkA7FJJujViaRI92aCTdGrE0CY92LCTdGrE0CYd2bCTdGrE0iQ7tVEi6NWJpEpZ2aiTdGrE0iYY2FiTdGrE0iUobG5JujViaBNpYkXSLxEoAiVgJIc0aK/anO8Wpt7N6GkwVSdFmgZU60iywckHKGis3pCyxckXKCit3pCyw5oKUNNbckJLEmitSUlhzR0oCi0jKtGqRR3y/N0ikbSR9FBUWkZSluY0Ci0jNOPWzk2IRqc5hfzwJFpHsKKbeUbGIZGLodn4ULCJ1w2gbNSgWFt9D5e092xQ69gfE2t+6JBa+QO1TCkzmnSMrqSKPEG+KL9dLYsFD1D6lwGQirRPdHCCXEFjH5YpY7BTVtxSYSKSNzc4R8umLdaZQj55KRNphaT7RE+tJVpW/il82L289+4Dez8vl8qd1FDvLBJDTL8kLtShPuP1T+gjUrdu8xQPGE8kxtB5YpY9AfXO45gPGEskhsOpQT6yVD54/l6hXqG2lwAB+41BN3vMYOXb9BuMaYzcvTXggb3htWNInt79hCZQA8txHvUQ1lWt0bL/hlWvjpHxlnaCeoz69VDmWcxvVQBvlMuvMj5Hv2Uvef9BK5l9QmXmKnyT/AS/pCbJI4duRAAAAAElFTkSuQmCC);}.rotateverify-contaniner .control-wrap{position:relative;height:40px;clear:both;border-radius:42px;margin-top:45px;background-color:#f7f7f7;}.rotateverify-contaniner .control-wrap .control-tips{position:relative;width:100%;height:100%;}.rotateverify-contaniner .c-tips-txt{height:40px;line-height:40px;position:absolute;width:100%;text-align:center;top:0;left:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.rotateverify-contaniner .control-btn{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:40px;border:1px solid #e0e0e0;background-color:#fff;}.rotateverify-contaniner .control-bor-wrap{position:absolute;left:0;top:0;width:40;height:40px;border-radius:40px;border:1px solid transparent;}.rotateverify-contaniner .control-bor-active{border:1px solid #1a91ed;}.rotateverify-contaniner .control-bor-err{border:1px solid #e01116;}.rotateverify-contaniner .control-bor-suc{border:1px solid limegreen;}.rotateverify-contaniner .control-btn-active{background:#1a91ed;}.rotateverify-contaniner .control-btn-err{background:#e01116;}.rotateverify-contaniner .control-btn-suc{background-color:limegreen;}.rotateverify-contaniner .control-btn-ico{display:block;width:20px;height:20px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAyCAYAAAATIfj2AAAAAXNSR0IArs4c6QAABAdJREFUaAXtWUloU0EYbhaNTQWhItiIBz2kaYkHodWDBxEUa9OFIBHxoOnB3oSCgoqCKdijC3rpQTBCcYsQaUsE0eJBRIXiQZEuehJzUxCa1mIWvxFHpsPMvCUzh8oLlDfzzbxvvn+Zmb9JQ4P38TzgecDzgOeBVeQBn0prKpUKLC0tXa7VagNkns/nu93Y2Hgxl8tVVO9ZjZniJesGVYsvLi6OwJizdA7a54BtRv+PgRR3+jTFS3T4LcSk+XEYle7p6TnJ4w77pngtDRLqrFarN/r6+nYKB+sAdfAqI4Ro3JHoW1epVB5hL2yQjCthU7xkUaVBgUBgGAfBB5E6iNpeKpWyojErzBQvWTegWnxubu5XPB5/jlRIY15IMDcWjUZL8/PzrwRjUsgUL1lQeWxTRYlEIoWIPKR97lmGx/dNTEy85HDLrgleZYSoIkTgY2trazOM2k0x5knStguRHJuZmSkxuGXTBK9yD7GKIpHIGfRfsxhtw9DI8vLyvUwmY5uPvqub11aEyOLT09PV9vb2pxB/HN0wFcQ8txWLxSC8PsVglk3dvLb2EKuqu7u7C/0C/kTv1rCfEthPT9h37LR18dqOEBWFCHzCyUZSay/FmKcPETwUi8Xu4yT7weCWTV28jnOeKOvs7CT30zOJymYc8zlcumsl41JYB68rg7D5q+Fw+BiM+ipShyjtQgF6RTSmwnTwivaBas0VY6jn9pTL5RcAhVW73+8/Ojk5+WDFSzY69fA63kOsntnZ2S+4n0qIyEEWZ9pdbW1tOcz7zmCWzXp4XaUcqwgRuIrUy7MYbcPQ9ShiM7Tv5OmWt26DiEik1hCMqooEw6gdItwO5oZXi0E41a5DuJALhr63I140xw2vUISIXIahwDwNY5KicRizgIs2Ixqzwtzy/nennOsI4eLchA1PjmThkY3o3HRzZNfL68ogUlXj4ryLVNsiSh0Y8xYXL6nOHX108Lq6h5qamoZhzIBILYz5htNpfz6fd3T3EC4dvI73kK6qmHeGLl5HKdff378VERiDGKEjEJkRN/866OS1bdDg4OAa1G05pNpG3rt/+1MdHR2XJGNSWDev7T3U0tJyDcYcFilD1IqhUOjA6OjogmhchenmFaYOLwD5fQSYrGp2/a2PCV7LlEsmk1FE4BZvJO1j7Lybr7BM8Soj1NvbG0Y99QapFqcGcM/HhUJBWPZw81Z0TfGSRYS3PF0dlQDZ5DJjPuPeSNO5Tp6meIkGZcohnU5IhP4MBoMp/PDl6IsQymWK19IgKoB/ooI+NT4+/o7H6+3r4FVGCAKzvEh4N4tDQHpI8PMlfVO86j2EAvMCfmPFmfCvbssSTCLSNmyK17YAb6LnAc8DngdWrQd+A6CJYdIFu4L0AAAAAElFTkSuQmCC) no-repeat center center;background-size:100% 100%;margin:10px;}.rotateverify-contaniner .control-btn-active .control-btn-ico{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAyCAYAAAATIfj2AAAAAXNSR0IArs4c6QAAAoRJREFUaAXtmb9OVFEQxjcQKGyspIPK2FvrA+gDAC8AL6C+gGIidvx5ABtqeABCDZSEFjtNLLTRwoLo+jvZJcBhvpnrLlPs5kzyhT3z5/vOzM1y757b6zVrE2gTaBNoE5iWCfT7/VnwAXwbonyeHbe/wgHunTfcF6KboLZPYWGQAGEKbyDb6yFcroxl62GxkwBhCq8jOQg5wr+JPQ0JREIWr5C7diP8ESj7TODhdXb3T9Sl8IY7QPgBOAfKDkISIwGyFF5D6q4L8Sfgp+oI/5u7VbEnizdWJgPxZaehS2LPOxFVSVm8lYy9RHzbaeorsQW70vdm8fqqRBGeA8dA2RGBmZCoSqAmhbeSsZeIL4LvQNl7u9L3QpbC66sOo4i/AH9FR8X/shNRlZTFW8nYS8TfioaK+wdYsit9L3UpvL4qUYRnwCFQdkpgPiSqEqhJ4a1k7CXij8AXoGzXrvS9kKXw+qrDKOLPQLkPKVvtRFQlQZbCW8nYS8RfqW7w/wKP7Urfm8Xrqw6jiO8DZXudSIwkCFN4DanbLoSXwB/R0dnt7O6rUXj/+84utrOFX3Gdi5ou7ixerc0UX4srU9zjfIdSeHUnRNhwyn+jLN6omeh+seMSiCDNpPAKuYEb0ZQ7ehav20wJIvwOKCtP46M+y6Xwug2x2el52qaZ6HfLhjsNEcziFXIDN6Lll+UJUHZEQN2LJDc1KbxS8CqA8PScKdDMClBWnrZHPfVJ4b26COZfNjs953I0k3LCmcVrXpGbToS9M+gL4hln2yPz3ty7+ZkNq9ceE/v2QTW0Zk6go9MZ1Fi8oTzCm6C2iX6DV78LLQ1mvGO9F97wCrWENoE2gTaBiZ/AP+8/LMb6T9MeAAAAAElFTkSuQmCC) no-repeat center center;background-size:100% 100%;}.rotateverify-contaniner .control-btn-err .control-btn-ico{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGoAAABqCAYAAABUIcSXAAAAAXNSR0IArs4c6QAABOhJREFUeAHt3F1O3DAUBeCZ7qJQUVXdQ6U+tUtBILq79okKUEGwAlaACO0DFV1C+0DPzXBnMpnYiR0nsZ1jyXUm/ok5H8wwBbJYVMrz8/MR6nfU3y9Vjo8qQ3gYOAHke4h6ivqIKrlL5seoy51L4eRr1B+opiJ9+zsTecI7AeS5h3phChznr2TM1gVwwoaka93j4GBrIh94JYAc36DeabCWVrBWX1k4kKe7roVYXjSbSQi6K5KanJSz8UieE10KsTa5Ox0hZFckcTlXKHkBcy3EciJaLBCwD5K4PMmlXjleT4e/w8ENFuFrliZiaQVJ8kJ9bxlm7RKoW+sIcyexzNmsewIglT4C9XW9qvsBsSyZBUCS1Tc+WLDLt+cYZix8zaqBISnf16RqyJtvz2V99OyjSth9CrFesBBiCKRC1qn5l1gH6CDWTjJuJwIivTVeGRchljGd9o5RkHQbxNIk3NpRkXRrxNIkurWTIOnWiKVJ2NtJkXRrxNIkmtsokHRrxNIkttuokHRrxNIkVm2USLpFYiWARKyEkOaOFfXTneLU27k9DSaJpGhzwUoaaS5YWSDljpUVUq5YWSLlhpU1Ui5Ys0BKHWtWSKlizRIpNaxZI6WCRSSVQoswovyFGSJVkPQwNiwiqUxDGwsWkRpw6qemxiJSXcTyeCosIllQTF1jYxHJJNHh/FhYROqA0TZkaCwitQk49A+FRSQHhK5DQ2MRqWvyHuMCYn3AWneofUqByea/T/L4+LKagnBC/HfT3z5CmFugEqntMwshhcDCMl6lwCwitSFpP8KaAotICuDSjoxFJBec+tiRsIhUD97n8cBYRPJBMc0ZCItIpsD7nA+MRaQ+GG1zgSVvZvu+T5L5H9uuxX7PBBBuiNvWYJmy3ONf3sLO08I4DaGGRFpRrW4nRCxj6o4dAyERy9HBOnxgJGJZ0+/YORISsTp6NA4bGYlYjQotJydCih7L9y7NLXH7dQsSZt6get/NGHP/ofqWaO+RGw1UIKQHCH1CLXylMC9arB4fU5ipgZ7uCqxT/tAPbYifZ/FNcZU3NJKuTSxNIkA7FJJujViaRI92aCTdGrE0CY92LCTdGrE0CYd2bCTdGrE0iQ7tVEi6NWJpEpZ2aiTdGrE0iYY2FiTdGrE0iUobG5JujViaBNpYkXSLxEoAiVgJIc0aK/anO8Wpt7N6GkwVSdFmgZU60iywckHKGis3pCyxckXKCit3pCyw5oKUNNbckJLEmitSUlhzR0oCi0jKtGqRR3y/N0ikbSR9FBUWkZSluY0Ci0jNOPWzk2IRqc5hfzwJFpHsKKbeUbGIZGLodn4ULCJ1w2gbNSgWFt9D5e092xQ69gfE2t+6JBa+QO1TCkzmnSMrqSKPEG+KL9dLYsFD1D6lwGQirRPdHCCXEFjH5YpY7BTVtxSYSKSNzc4R8umLdaZQj55KRNphaT7RE+tJVpW/il82L289+4Dez8vl8qd1FDvLBJDTL8kLtShPuP1T+gjUrdu8xQPGE8kxtB5YpY9AfXO45gPGEskhsOpQT6yVD54/l6hXqG2lwAB+41BN3vMYOXb9BuMaYzcvTXggb3htWNInt79hCZQA8txHvUQ1lWt0bL/hlWvjpHxlnaCeoz69VDmWcxvVQBvlMuvMj5Hv2Uvef9BK5l9QmXmKnyT/AS/pCbJI4duRAAAAAElFTkSuQmCC) no-repeat center center;background-size:100% 100%;}.rotateverify-contaniner .control-btn-suc .control-btn-ico{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH4AAABWCAYAAAAJ3CLTAAAAAXNSR0IArs4c6QAABFZJREFUeAHtncuO00AQRWdALFkiXsM0Az/FArGIhPg3EAvEazEL4AdY824eQsBXhNsTW1gmiduu6vct6cp20qmuuiftOMkoc3DAqM6B9Xq9gp5Dvzq5/VV1jbKhjQOAewSdQrvC3XeVflXkAIAeQ593ER/cflpR22230kH/MoA7tbs637Zl5XfvoKOL19DJjG4uEPwMt3IbuhC6a+PiudyaYT1+Dgign01A8H4+ZzVKCh3NvCX4rJBOF6MA3U3yeHomjsjGAQcdmnP1juH/Bd/OZUPUoxDg04DunjTXPabjkBwcUITu3voxSnCA0EugpFwjoSsbWkI6Qi+BknKNStDdFzZ8TVdmEyydIvQbwYpkYl0HCF3XzyKyEXoRmHSLJHRdP4vIRuhFYNItktB1/SwiG6EXgUm3SEA3kPRbNvc+nW/ZdNGEy9ZBt9hKgtDDIdLPDNIGspAkCF0fTbiMIG0gC0mC0MMh0s8M0gaykCQIXR9NuIwgbSALSYLQwyHSzwzSBrKQJAhdH024jCBtIAtJgtDDIdLPDNIGspAkCF0fTbiMIG0gC0mC0MMh0s8M0gaykCTiQ0e1d6CH0KdOj9xt+hbVlxE+GegrJAnne7yPYTHZJejJnordfZfrw6XTEbwxkIUkERe6ax3Vut9ImYp3GMCf0Rg9V+CJgSwkiSTQ786omPAH4OGbgSwkifjQu9X+dGbVhL85Sxr4Zmd6Nx6eBnoH/ue4Go/jpuHDHwNZSBIO+tHgBBJ3F5P/WVh9k/DhlYEsJIm00LsV/1LQQVPw4ZOBLCSJ9NA78A8kXeCx76Hqr/bRo4E03qenO70PX0zQzCH0BpJE1SsfxhjIQpLIY6WP4Bt09EPSFR5b5cpHXwaqZ6UPwXen/NtoUAq/qpUPP25WDb1/EqBJDfhVrPxmoBN+78DZR9htrPR/LW/2Wl75za10wm94pe+A/x2rQBJFvOajwTZP72Po/TEMcRd8VcMn9J72aFszfEIfwR4fwqBbkMbKvzbOneqY0D2drwk+oXtC74fVAJ/Qe5oztyXDV4L+EXny+JZtJjvx8BLhE7oY+yZBSfAJXQl6n6YE+ITe01Le5gyf0JVhj9PlCF8ROv+dxxj48Dgn+IQ+JBNhPwf4hB4B9LYpUsIn9G1EIt6mBP8D8nh/tk/oEQHvmyomfMx1Akn/GtZ9IscLuX1Qfe+LAb+D/g1bSRC6L1TfcaCh8ZXu1tM+cruVTui+MGKPCwGf0GNTXDifJnxCXwgh1cM6+NJTszvta+TghVzMJ4ISfKRZHLyQiwl8OBeQaVyULSFP6EMQKfYTwCf0FKC3zRkRvrsu4Gv6NgipbosAn9BTwZ2aNyB8Qp8yP/X9AeATemqovvMrwid0X9NzGacAn9BzgTm3DgF8Qp9rdm7jF8An9NwgLq1nBnxCX2pyro8D/GPoFbQr3M+yXsm1ftYlcABgD6H70AvoN+R+dfsZdE+QttmH/gVo1WKZD73PfwAAAABJRU5ErkJggg==) no-repeat center center;background-size:100% 100%;}'
  305. var styleObj = $(
  306. '<style type="text/css">'+ inlineCss +'</style>'
  307. )
  308. // $('head').prepend(styleObj);
  309. _global = (function(){ return this || (0, eval)('this'); }());
  310. if (typeof module !== "undefined" && module.exports) {
  311. module.exports = RotateVerify;
  312. } else if (typeof define === "function" && define.amd) {
  313. define(function(){return RotateVerify;});
  314. } else {
  315. !('RotateVerify' in _global) && (_global.RotateVerify = RotateVerify);
  316. }
  317. }());