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 _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;
}
var x = e.pageX - disPageX;
if(x<0){
x=0;
}else if(x >=(_this.$slideDragWrap.width()-_this.$slideDragBtn.outerWidth())){
x = _this.$slideDragWrap.width()-_this.$slideDragBtn.outerWidth();
}
_this.$slideDragBtn.css({
'left':x + 'px'
})
_this.controlBorWrap.css({
'width':x + _this.$slideDragBtn.width() + 'px'
})
_this.disLf = x;
_this.drawImgCan();
e.preventDefault();
})
});
$(document).on('mouseup',function(){
if(!ifThisMousedown){
return false;
}
ifThisMousedown = false;
if(_this.verifyState){
return false;
}
$(document).off('mousemove');
_this.$slideDragBtn.removeClass('control-btn-active');
_this.controlBorWrap.removeClass('control-bor-active');
if(_this.sucLenMin <= _this.disLf && _this.disLf <= _this.sucLenMax){
_this.$slideDragBtn.addClass('control-btn-suc');
_this.controlBorWrap.addClass('control-bor-suc');
_this.statusBg.fadeIn();
_this.statusBg.addClass('suc-bg');
_this.verifyState = true;
_this.cTipsTxt.text("");
if(_this.settings.getSuccessState){
_this.settings.getSuccessState(_this.verifyState);
}
}else{
_this.$slideDragBtn.addClass('control-btn-err');
_this.controlBorWrap.addClass('control-bor-err');
_this.$slideDragWrap.addClass('control-horizontal');
_this.dragTimerState = true;
_this.verifyState = false;;
_this.statusBg.fadeIn();
_this.statusBg.addClass('err-bg');
_this.$slideDragBtn.delay(700).animate({
left:'0px'
},function(){
_this.dragTimerState = false;
_this.$slideDragWrap.removeClass('control-horizontal');
_this.$slideDragBtn.removeClass('control-btn-err');
_this.statusBg.removeClass('err-bg');
_this.statusBg.fadeOut();
_this.refreshSlide();
})
_this.controlBorWrap.delay(700).animate({
width:_this.$slideDragBtn.width() + 'px'
},function(){
_this.controlBorWrap.removeClass('control-bor-err');
});
}
});
},
_touchstart:function(){
var _this = this;
_this.$slideDragBtn.on('touchstart',function(e){
_this.$slideDragBtn.css('pointer-events','none');
setTimeout(function(){_this.$slideDragBtn.css('pointer-events','all')},400)
if(_this.dragTimerState || ifAnimate(_this.$slideDragBtn) || _this.verifyState){
return false;
}
if(getEleCssLeft(_this.$slideDragBtn) == 0){
_this.touchX = e.originalEvent.targetTouches[0].pageX;
_this.$slideDragBtn.addClass('control-btn-active');
_this.controlBorWrap.addClass('control-bor-active');
_this._touchmove();
}
})
},
_touchmove:function(){
var _this = this;
_this.$slideDragBtn.on('touchmove',function(e){
e.preventDefault();
if(_this.dragTimerState || ifAnimate(_this.$slideDragBtn)){
return false;
}else{
var x = e.originalEvent.targetTouches[0].pageX - _this.touchX;
if(x<0){
x=0;
}else if(x >=(_this.$slideDragWrap.width()-_this.$slideDragBtn.outerWidth())){
x = _this.$slideDragWrap.width()-_this.$slideDragBtn.outerWidth();
}
_this.$slideDragBtn.css({
'left':x + 'px'
})
_this.controlBorWrap.css({
'width':x + _this.$slideDragBtn.width() + 'px'
})
_this.disLf = x;
_this.drawImgCan();
}
})
},
_touchend:function(){
var _this = this;
_this.$slideDragBtn.on('touchend',function(){
_this.$slideDragBtn.off('touchmove');
_this.$slideDragBtn.removeClass('control-btn-active');
_this.controlBorWrap.removeClass('control-bor-active');
if((_this.sucLenMin) <= _this.disLf && _this.disLf <= (_this.sucLenMax)){
_this.verifyState = true;
_this.$slideDragBtn.addClass('control-btn-suc');
_this.controlBorWrap.addClass('control-bor-suc');
_this.statusBg.fadeIn();
_this.statusBg.addClass('suc-bg');
_this.cTipsTxt.text("");
if(_this.settings.getSuccessState){
_this.settings.getSuccessState(_this.verifyState);
}
}else{
if(!ifAnimate(_this.$slideDragBtn)){
_this.dragTimerState = true;
_this.verifyState = false;
_this.statusBg.fadeIn();
_this.statusBg.addClass('err-bg');
_this.$slideDragBtn.addClass('control-btn-err');
_this.controlBorWrap.addClass('control-bor-err');
_this.$slideDragWrap.addClass('control-horizontal');
_this.$slideDragBtn.delay(700).animate({
left:'0px'
},function(){
_this.$slideDragWrap.removeClass('control-horizontal');
_this.$slideDragBtn.removeClass('control-btn-err');
_this.statusBg.removeClass('err-bg');
_this.statusBg.fadeOut();
_this.dragTimerState = false;
_this.refreshSlide();
})
_this.controlBorWrap.delay(700).animate({
width:_this.$slideDragBtn.width() + 'px'
},function(){
_this.controlBorWrap.removeClass('control-bor-err');
});
}else{
return false;
}
}
})
},
setAttrSrc:function(){
if(isArray(this.settings.slideImage)){
this.slideImageSrc = getRandomImg(this.settings.slideImage);
}else{
this.slideImageSrc = this.settings.slideImage;
}
this.slideImage.setAttribute("data-src",this.slideImageSrc);
},
refreshSlide:function(){
var _this = this;
_this.initCanvasImg();
},
resetSlide:function(){
var _this = this;
_this.$slideDragBtn.css({
left:'0px'
})
_this.controlBorWrap.css({
width:_this.$slideDragBtn.width() + 'px'
})
_this.controlBorWrap.removeClass('control-bor-suc');
_this.dragTimerState = false;
_this.verifyState = false;;
_this.$slideDragBtn.removeClass('control-btn-suc');
_this.$slideDragWrap.removeClass('control-horizontal');
_this.statusBg.fadeOut();
_this.statusBg.removeClass('suc-bg');
_this.cTipsTxt.text(_this.settings.initText);
_this.refreshSlide();
}
}
var inlineCss = '*{margin:0;padding:0;box-sizing:border-box;}.rotateverify-contaniner{width:200px;margin:0 auto;}@-webkit-keyframes rotateverifyHorizontal{0%{-webkit-transform:translate(0px,0);-ms-transform:translate(0px,0);transform:translate(0px,0)}10%,30%,50%,70%,90%{-webkit-transform:translate(-1px,0);transform:translate(-1px,0)}20%,40%,60%,80%{-webkit-transform:translate(1px,0);transform:translate(1px,0)}100%{-webkit-transform:translate(0px,0);transform:translate(0px,0)}}@-moz-keyframes rotateverifyHorizontal{0%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);transform:translate(0px,0)}10%,30%,50%,70%,90%{-webkit-transform:translate(-1px,0);-moz-transform:translate(-1px,0);transform:translate(-1px,0)}20%,40%,60%,80%{-webkit-transform:translate(1px,0);-moz-transform:translate(1px,0);transform:translate(1px,0)}100%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);transform:translate(0px,0)}}@keyframes rotateverifyHorizontal{0%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);transform:translate(0px,0)}10%,30%,50%,70%,90%{-webkit-transform:translate(-1px,0);-moz-transform:translate(-1px,0);transform:translate(-1px,0)}20%,40%,60%,80%{-webkit-transform:translate(1px,0);-moz-transform:translate(1px,0);transform:translate(1px,0)}100%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);transform:translate(0px,0)}}.rotateverify-contaniner .control-horizontal{-webkit-animation:rotateverifyHorizontal .6s .2s ease both;-moz-animation:rotateverifyHorizontal .6s .2s ease both;animation:rotateverifyHorizontal .6s .2s ease both}.rotateverify-contaniner .rotate-can-wrap{width:200px;height:200px;position:relative;}.rotateverify-contaniner .status-bg{width:100%;height:100%;position:absolute;top:0;left:0;background-color:rgba(0,0,0,.3);background-repeat:no-repeat;background-position:center center;border-radius:100%;display:none;}.rotateverify-contaniner .status-bg.suc-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH4AAABWCAYAAAAJ3CLTAAAAAXNSR0IArs4c6QAABFZJREFUeAHtncuO00AQRWdALFkiXsM0Az/FArGIhPg3EAvEazEL4AdY824eQsBXhNsTW1gmiduu6vct6cp20qmuuiftOMkoc3DAqM6B9Xq9gp5Dvzq5/VV1jbKhjQOAewSdQrvC3XeVflXkAIAeQ593ER/cflpR22230kH/MoA7tbs637Zl5XfvoKOL19DJjG4uEPwMt3IbuhC6a+PiudyaYT1+Dgign01A8H4+ZzVKCh3NvCX4rJBOF6MA3U3yeHomjsjGAQcdmnP1juH/Bd/OZUPUoxDg04DunjTXPabjkBwcUITu3voxSnCA0EugpFwjoSsbWkI6Qi+BknKNSt.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0