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

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.con.........完整代码请登录后点击上方下载按钮下载查看