jquery实现百度旋转图片变正滑块验证-html代码-BFW代码库

jquery实现百度旋转图片变正滑块验证

代码语言：html

所属分类：验证

代码描述：jquery实现百度旋转图片变正滑块验证

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
	<script >
	    ;(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 _.........完整代码请登录后点击上方下载按钮下载查看