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

代码语言：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 _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;
                    }
                  .........完整代码请登录后点击上方下载按钮下载查看