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

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18