jquery编写一个旋转图片摆正验证码插件代码
代码语言:html
所属分类:验证
代码描述:jquery编写一个旋转图片摆正验证码插件代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <style> /* 验证弹框 */ .box { margin: 0 auto; position: absolute; left: 49.5%; top: 40%; height: 420px; width: 300px; margin-left: -150px; margin-top: -210px; border: 1px solid #ccc; background-color: #fff; border-radius: 25px; z-index: 99; } .box-bg { position: absolute; top: 0px; width: 100%; height: 1080px; background-color: rgba(0, 0, 0, 0.5); } .top-s { font-size: 12px; color: #ccc; display: block; text-align: center; margin-left: 25px; margin-top: 25px; margin-bottom: 5px; } .top-x { font-size: 18px; color: black; display: block; text-align: center; margin-bottom: 45px; } .cuo { float: right; margin-right: 10px; margin-top: 5px; cursor: pointer; } .icon{ font-family: FontAwesome; } </style> </head> <body> <!-- 验证弹窗 --> <div class="box-bg"> <div class="box"> <img src="//repo.bfw.wiki/bfwrepo/icon/5ffd0e43aeff2.png" class="cuo"> <span class="top-s">身份验证</span> <span class="top-x">拖动滑块,使图片角度为正</span> <div id="rotateWrap1"> <div class="rotateverify-contaniner"> <div class="rotate-can-wrap"> <canvas class="rotateCan rotate-can" width="200" height="200"></canvas> <div class="statusBg status-bg"></div> </div> <div class="control-wrap slideDragWrap"> <div class="control-tips"> <p class="c-tips-txt cTipsTxt">滑动将图片转正</p> </div> <div class="control-bor-wrap controlBorWrap"></div> <div class="control-btn slideDragBtn"> <i class="control-btn-ico"></i> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> ;(function(undefined) { "use strict" var _global; //判断是否为 数组 function isArray(o){ return Object.prototype.toString.call(o)=='[object Array]'; } //随机数 function getRandomNumber(a,b) { return Math.round(Math.random()*(b- a) + a) } //获取随机图片 function getRandomImg(imgArr) { return imgArr[getRandomNumber(0,imgArr.length-1)] } //判断 是否处于动画状态 function ifAnimate(ele) { if(ele.is(":animated")){ return true }else{ return false } } //获取元素的left值 function getEleCssLeft($ele) { return parseInt($ele.css('left')); } var RotateVerify = function (ele,opt) { this.$ele = $(ele); //默认参数 this.defaults = { initText:'滑动将图片转正', slideImage:'', slideAreaNum:10, getSucessState:function(){ } } this.settings = $.extend({}, this.defaults, opt); this.init(); } RotateVerify.prototype = { constructor: this, init:function () { this.verifyState = false; this.disLf = 0; this.initDom(); this.initCanvasImg(); this.initMouse(); this._touchstart(); this._touchend(); }, initDom:function () { this.statusBg = this.$ele.find('.statusBg'); this.$slideDragWrap = this.$ele.find('.slideDragWrap'); this.$slideDragBtn = this.$ele.find('.slideDragBtn'); this.rotateCan = this.$ele.find('.rotateCan'); this.cTipsTxt = this.$ele.find('.cTipsTxt'); this.controlBorWrap = this.$ele.find('.controlBorWrap'); this.xPos = this.rotateCan[0].width/2; this.yPos = this.rotateCan[0].height/2; this.aveRot = Math.round((360/(this.$slideDragWrap.width() - this.$slideDragBtn.outerWidth())) * 100 )/100; this.rotateImgCan = this.rotateCan[0].getContext('2d'); this.slideImage = document.createElement('img'); this.setAttrSrc(); }, initCanvasImg:function () { this.randRot = getRandomNumber(30,270); this.sucLenMin = (360 - this.settings.slideAreaNum - this.randRot) * (this.$slideDragWrap.width() - this.$slideDragBtn.width())/360; this.sucLenMax = (360 + this.settings.slideAreaNum - this.randRot) * (this.$slideDragWrap.width() - this.$slideDragBtn.width())/360; this.disLf = 0; this.initImgSrc(); }, initImgSrc:function(){ var _this = this; _this.slideImage.src = _this.slideImage.getAttribute('data-src'); _this.setAttrSrc(); _this.slideImage.onload = function(){ _this.slideImage.style.width = '200px'; _this.slideImage.style.height = '200px'; _this.drawImgCan(); } }, drawImgCan:function(val){ var _this = this; _this.rotateImgCan.beginPath(); _this.rotateImgCan.arc( 100, 100, 100, 0, 360 * Math.PI / 180, false ); _this.rotateImgCan.closePath(); _this.rotateImgCan.clip(); _this.rotateImgCan.save(); _this.rotateImgCan.clearRect(0,0,200,200); _this.rotateImgCan.translate(_this.xPos, _this.yPos); _this.rotateImgCan.rotate(this.randRot * Math.PI / 180 + _this.disLf * _this.aveRot * Math.PI / 180); _this.rotateImgCan.translate(-_this.xPos, -_this.yPos); _this.rotateImgCan.drawImage( _this.slideImage, _this.xPos - 200 / 2, _this.yPos - 200 / 2,200,200); _this.rotateImgCan.restore(); }, initMouse:function () { var _this = this ; var ifThisMousedown = false; _this.$slideDragBtn.on('mousedown',function (e) { if(_this.verifyState){ return false; } if(_this.dragTimerState){ return false; } if(ifAnimate(_this.$slideDragBtn)){ return false; } ifThisMousedown = true; var positionDiv = $(this).offset(); var distenceX = e.pageX - positionDiv.left; var disPageX = e.pageX; _this.$slideDragBtn.addClass('control-btn-active'); _this.controlBorWrap.addClass('control-bor-active'); $(document).mousemove(function (e) { if(!ifThisMousedown){ return false; } var x = e.pageX - disPageX; if(x<0){ x=0; }else if(x >=(_this.$slideDragWrap.width()-_this.$slideDragBtn.outerWidth())){ x = _this.$slideDragWrap.width()-_this.$slideDragBtn.outerWidth(); } _this.$slideDragBtn.css({ 'left':x + 'px' }) _this.controlBorWrap.css({ 'width':x + _this.$slideDragBtn.width() + 'px' }) _this.disLf = x; _this.drawImgCan(); e.preventDefault(); }) }); $(document).on('mouseup',function(){ if(!ifThisMousedown){ return false; } ifThisMousedown = false; if(_this.verifyState){ return false; } $(document).off('mousemove'); _this.$slideDragBtn.removeClass('control-btn-active'); _this.controlBorWrap.removeClass('control-bor-active'); if(_this.sucLenMin <= _this.disLf && _this.disLf <= _this.sucLenMax){ _this.$slideDragBtn.addClass('control-btn-suc'); _this.controlBorWrap.addClass('control-bor-suc'); _this.statusBg.fadeIn(); _this.statusBg.addClass('suc-bg'); _this.verifyState = true; _this.cTipsTxt.text(""); if(_this.settings.getSuccessState){ _this.settings.getSuccessState(_this.verifyState); } }else{ _this.$slideDragBtn.addClass('control-btn-err'); _this.controlBorWrap.addClass('control-bor-err'); _this.$slideDragWrap.addClass('control-horizontal'); _this.dragTimerState = true; _this.verifyState = false;; _this.statusBg.fadeIn(); _this.statusBg.addClass('err-bg'); _this.$slideDragBtn.delay(700).animate({ left:'0px' },function(){ _this.dragTimerState = false; _this.$slideDragWrap.removeClass('control-horizontal'); _this.$slideDragBtn.removeClass('control-btn-err'); _this.statusBg.removeClass('err-bg'); _this.statusBg.fadeOut(); _this.refreshSlide(); }) _this.controlBorWrap.delay(700).animate({ width:_this.$slideDragBtn.width() + 'px' },function(){ _this.controlBorWrap.removeClass('control-bor-err'); }); } }); }, _touchstart:function(){ var _this = this; _this.$slideDragBtn.on('touchstart',function(e){ _this.$slideDragBtn.css('pointer-events','none'); setTimeout(function(){_this.$slideDragBtn.css('pointer-events','all')},400) if(_this.dragTimerState || ifAnimate(_this.$slideDragBtn) || _this.verifyState){ return false; } if(getEleCssLeft(_this.$slideDragBtn) == 0){ _this.touchX = e.originalEvent.targetTouches[0].pageX; _this.$slideDragBtn.addClass('control-btn-active'); _this.controlBorWrap.addClass('control-bor-active'); _this._touchmove(); } }) }, _touchmove:function(){ var _this = this; _this.$slideDragBtn.on('touchmove',function(e){ e.preventDefault(); if(_this.dragTimerState || ifAnimate(_this.$slideDragBtn)){ return false; }else{ var x = e.originalEvent.targetTouches[0].pageX - _this.touchX; if(x<0){ x=0; }else if(x >=(_this.$slideDragWrap.width()-_this.$slideDragBtn.outerWidth())){ x = _this.$slideDragWrap.width()-_this.$slideDragBtn.outerWidth(); } _this.$slideDragBtn.css({ 'left':x + 'px' }) _this.controlBorWrap.css({ 'width':x + _this.$slideDragBtn.width() + 'px' }) _this.disLf = x; _this.drawImgCan(); } }) }, _touchend:function(){ var _this = this; _this.$slideDragBtn.on('touchend',function(){ _this.$slideDragBtn.off('touchmove'); _this.$slideDragBtn.removeClass('control-btn-active'); _this.controlBorWrap.removeClass('control-bor-active'); if((_this.sucLenMin) <= _this.disLf && _this.disLf <= (_this.sucLenMax)){ _this.verifyState = true; _this.$slideDragBtn.addClass('control-btn-suc'); _this.controlBorWrap.addClass('control-bor-suc'); _this.statusBg.fadeIn(); _this.statusBg.addClass('suc-bg'); _this.cTipsTxt.text(""); if(_this.settings.getSuccessState){ _this.settings.getSuccessState(_this.verifyState); } }else{ if(!ifAnimate(_this.$slideDragBtn)){ _this.dragTimerState = true; _this.verifyState = false; _this.statusBg.fadeIn(); _this.statusBg.addClass('err-bg'); _this.$slideDragBtn.addClass('control-btn-err'); _this.controlBorWrap.addClass('control-bor-err'); _this.$slideDragWrap.addClass('control-horizontal'); _this.$slideDragBtn.delay(700).animate({ left:'0px' },function(){ _this.$slideDragWrap.removeClass('control-horizontal'); _this.$slideDragBtn.removeClass('control-btn-err'); _this.statusBg.removeClass('err-bg'); _this.statusBg.fadeOut(); _this.dragTimerState = false; _this.refreshSlide(); }) _this.controlBorWrap.delay(700).animate({ width:_this.$slideDragBtn.width() + 'px' },function(){ _this.controlBorWrap.removeClass('control-bor-err'); }); }else{ return false; } } }) .........完整代码请登录后点击上方下载按钮下载查看
网友评论0