图片滑动验证码，逻辑是根据鼠标滑动轨迹，坐标位置，计算拖动速度等等来判断是否人为操作，当然下面的代码只是实现前端部分，只记录了拖动的坐标。本文主要为大家详细介绍了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 $pMove = $(this).find(".code-btn-img"); //拖动按钮
var $pWrap = $(this).find(".code-btn");//鼠标可拖拽区域
var mX = 0, mY = 0;//定义鼠标X轴Y轴
var dX = 0, dY = 0;//定义滑动区域左、上位置
var isDown = false;//mousedown标记
if(document.attachEvent) {//ie的事件监听，拖拽p时禁止选中内容，firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;
$pMove[0].attachEvent('onselectstart', function() {
return false;
});
}
//按钮拖动事件
$pMove.on({
mousedown: function (e) {
//清除提示信息
$this.find(".code-tip").html("");
var event = e || window.event;
mX = event.pageX;
dX = $pWrap.offset().left;
dY = $pWrap.offset().top;
isDown = true;//鼠标拖拽启
$(this).addClass("active");
//修改按钮阴影
$pMove.css({"box-shadow":"0 0 8px #666"});
}
});
//鼠标点击松手事件
$(document).mouseup(function (e) {
var lastX = $this.find(".code-mask").offset().left - dX - 1;
isDown = false;//鼠标拖拽启
$pMove.removeClass("active");
//还原按钮阴影
$pMove.css({"box-shadow":"0 0 3px #ccc"});
checkcode(lastX);
});
//滑动事件
$pWrap.mousemove(function (event) {
var event = event || window.event;
var x = event.pageX;//鼠标滑动时的X轴
if (isDown) {
if(x>(dX+30) && xcss部分：
.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部分：
效果图：
![js插件实现图片滑动验证码实例分享]()
按照以上思路希望能帮助到大家，大家可以动手尝试一下。
装修公司企业网站源码2.0
装修公司源码，采用DIV+CSS布局，首页顶部采用了超大宽屏banner焦点图切换，带伸缩功能的导航条。首页信息展示量大，有利于SEO优化，首页版块包括，导航，焦点图切换，案例，行业动态，装修经验，装修知识。源码支持伪静态，后台开启即可，服务器必须支持rewrite功能，否则无法实现伪静态功能。信息支持二级分类。后台支持信息批量修改，删除，可以支持，视频，图片，附件上传。
下载
相关推荐：
jQuery Ajax显示对号和错号用于验证输入验证码是否正确
![js插件实现图片滑动验证码实例分享]()
