jquery编写一个旋转图片摆正验证码插件代码

代码语言:html

所属分类:验证

代码描述:jquery编写一个旋转图片摆正验证码插件代码

代码标签: 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