html滑动验证图片,js插件实现图片滑动验证码

图片滑动验证码，逻辑是根据鼠标滑动轨迹，坐标位置，计算拖动速度等等来判断是否人为操作，当然下面的代码只是实现前端部分，只记录了拖动的坐标。

先上代码吧，做个备份记录

jquery.lgymove.js

/**

* Created by lgy on 2017/10/21.

* 图片验证码

*/

(function ($) {

$.fn.imgcode = function (options) {

//初始化参数

var defaults = {

callback:"" //回调函数

};

var opts = $.extend(defaults, options);

return this.each(function () {

var $this = $(this);//获取当前对象

var html = '

' +

'

'

' +

'

' +

'

' +

'

' +

'

' +

'

刷新

' +

'

' +

'

' +

'

'按住滑块，拖动完成上方拼图' +

'

';

$this.html(html);

//定义拖动参数

var $divMove = $(this).find(".code-btn-img"); //拖动按钮

var $divWrap = $(this).find(".code-btn");//鼠标可拖拽区域

var mX = 0, mY = 0;//定义鼠标X轴Y轴

var dX = 0, dY = 0;//定义滑动区域左、上位置

var isDown = false;//mousedown标记

if(document.attachEvent) {//ie的事件监听，拖拽div时禁止选中内容，firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;

$divMove[0].attachEvent('onselectstart', function() {

return false;

});

}

//按钮拖动事件

$divMove.on({

mousedown: function (e) {

//清除提示信息

$this.find(".code-tip").html("");

var event = e || window.event;

mX = event.pageX;

dX = $divWrap.offset().left;

dY = $divWrap.offset().top;

isDown = true;//鼠标拖拽启

$(this).addClass("active");

//修改按钮阴影

$divMove.css({"box-shadow":"0 0 8px #666"});

}

});

//鼠标点击松手事件

$(document).mouseup(function (e) {

var lastX = $this.find(".code-mask").offset().left - dX - 1;

isDown = false;//鼠标拖拽启

$divMove.removeClass("active");

//还原按钮阴影

$divMove.css({"box-shadow":"0 0 3px #ccc"});

checkcode(lastX);

});

//滑动事件

$divWrap.mousemove(function (event) {

var event = event || window.event;

var x = event.pageX;//鼠标滑动时的X轴

if (isDown) {

if(x>(dX+30) && x

$divMove.css({"left": (x - dX - 20) + "px"});//div动态位置赋值

$this.find(".code-mask").css({"left": (x - dX-30) + "px"});

}

}

});

//验证数据

function checkcode(code){

var iscur=false;

//模拟ajax

setTimeout(function(){

if(iscur){

checkcoderesult(1,"验证通过");

$this.find(".code-k-div").hide();

opts.callback({code:1000,msg:"验证通过",msgcode:"23dfdf123"});

}else{

$divMove.addClass("error");

checkcoderesult(0,"验证不通过");

opts.callback({code:1001,msg:"验证不通过"});

setTimeout(function() {

$divMove.removeClass("error");

$this.find(".code-mask").animate({"left":"0px"},200);

$divMove.animate({"left": "10px"},200);

},400);

}

},500)

}

//验证结果

function checkcoderesult(i,txt){

if(i==0){

$this.find(".code-tip").addClass("code-tip-red");

}else{

$this.find(".code-tip").addClass("code-tip-green");

}

$this.find(".code-tip").html(txt);

}

})

}

})(jQuery);

css部分：

.code_bg{

position: fixed;

top:0;

left: 0;

right:0;

bottom:0;

background-color: rgba(0,0,0,.5);

z-index: 99;

}

.icon-login-bg{

background-image: url(../img/icon/loginicon.png);

background-repeat: no-repeat;

}

.code-con{

position: absolute;

top:100px;

width: 320px;

left: 50%;

margin-left: -160px;

background-color: #fff;

z-index: 100;

-moz-user-select: none;

-webkit-user-select: none;

}

.code-img{

margin: 5px 5px;

padding: 5px 5px;

background-color: #f5f6f7;

}

.code-img img{

display: block;

}

.icon-w-25{

display: inline-block;

width: 25px;

height: 25px;

text-indent: -9999px;

}

.icon-push{

cursor: pointer;

background-position: -149px -95px;

}

.code-push{

height: 25px;

}

.code-btn{

position: relative;

height: 30px;

text-align: center;

color: #999;

margin: 10px 10px;

box-sizing: border-box;

background-color: #f5f6f7;

border-radius: 15px;

border: 1px solid #e1e1e1;

}

.code-btn-m{

position: absolute;

width: 40px;

height: 40px;

border-radius: 50%;

background-color: #f5f6f7;

border: 1px solid #e1e1e1;

z-index: 5;

top:-8px;

left: 10px;

box-shadow: 0 0 3px #ccc;

cursor: pointer;

background-position: -63px 10px;

}

.code-btn-img{

background-image:url(../img/icon/codejt.png);

background-repeat: no-repeat;

}

.code-btn-img.active{

background-position: -134px 10px;

}

.code-btn-img.error{

background-position: 8px 10px;

}

.code-img-con{

position: relative;

}

.code-mask{

position: absolute;

top:0;

left: 0;

z-index: 10;

}

.code-tip{

padding-left: 10px;

font-size: 12px;

color: #999;

}

.code-tip-red{

color: red;

}

.code-tip-green{

color: green;

}

html部分：

$("#imgscode").imgcode();

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。