spinVerify

功能描述

简单的实现类似百度登录页面出现图片角度验证的功能

快速使用

1.引入CSS文件

<link rel="stylesheet" type="text/css" href="css/aui.css"/>

2.引入JS文件

  <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script src="js/spinVerify.js" type="text/javascript" charset="utf-8"></script>

3.初始化插件

       var myRotateVerify = new RotateVerify('#rotateWrap1', {
                    initText : '滑动将图片转正', //默认
                    slideAreaNum : 15, // 误差范围角度 +- 10(默认)
                    getSuccessState : function(res) {//验证通过 返回  true;
                        // console.log('验证通过' + res);
                    }
                })

4.参数说明

initImgSrc 获取随机图片

initImgSrc : function() {
                var _this = this;
                _this.slideImage.src = 'https://picsum.photos/id/' + Math.ceil(Math.random() * 1000) + '/200/200';
                _this.setAttrSrc();
                _this.slideImage.onload = function() {
                    _this.slideImage.style.width = '200px';
                    _this.slideImage.style.height = '200px';
                    _this.drawImgCan();
                }
            },

initCanvasImg 初始化画布大小

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();
            },

其他说明

其他参数用法详细用法见index.html