js插件实现滑动验证代码

图像幻灯片验证代码，逻辑基础是鼠标滑动轨迹，坐标位置，拖动速度的计算等，以确定是否有人操作，当然，下面的代码只实现了前端部分，只记录了拖动的坐标。
先做代码，做备份记录。
jquery.lgymove.js
*由LGY 2017 / 10 / 21。
*图片验证码
* /
（函数（$）{）
美元。fn.imgcode =功能（选项）{
初始化参数
var默认值= {
回调函数
}；
VaR选择=美元。扩展（默认值，选择）；
返回this.each（函数（）{（）
var $ = $（这个）；获取当前对象
var =+
+
+
+
+
+
+
刷新+
+
+
+
按住滑块，拖动完成拼图游戏+
'；
this.html美元（HTML）；

定义拖动参数
divmove = $（var $本）。找到（。代码BTN IMG）； / /拖动按钮
divwrap = $（var $本）。找到（。代码按钮）； / /鼠标拖动区域
var = 0，我= 0；定义鼠标X轴Y轴。
var = 0，镝= 0；定义左位置的滑动区域，
VaR下= false； / / MouseDown标记
如果（文件。attachevent）{ / / IE事件监听器。当div被拖动时，div禁止选择内容。Firefox和Chrome已经-moz用户选择：没有CSS；- WebKit用户选择：无；
为divmove { 0 }。attachevent（'onselectstart，函数（）{（）{
返回false；
}）；
}
按钮拖动事件
divmove.on美元（{
mousedown：功能（e）{
删除/消息
this.find美元（代码提示）。Html（）；
风险事件= e window.event | |；
MX = event.pagex；
DX = $ divwrap.offset（左）；
dy＝divwrap.offset美元（顶部）；
我= true； / /转。鼠标拖动
$（这）。AddClass（主动）；
修改按钮阴影
divmove.css美元（{box-shadow：00 8px # 666}）；
}
}）；
转到鼠标单击事件
$（document）。Mouseup（function（e）{
无功lastx = this.find美元（。掩码）。偏移（左DX - 1）；
我= false； / /转。鼠标拖动
divmove.removeclass美元（主动）；
还原按钮阴影
divmove.css美元（{box-shadow：00 3px # CCC}）；
Checkcode（lastx）；
}）；
幻灯片事件
divwrap.mousemove美元（功能（事件）{）
var =事件| | window.event事件；
var x = event.pagex； / / X轴时，滑动鼠标
如果（我）{
如果（x =（DX + 30）x < $ +（this）……Width（）- 20）{
divmove.css美元（{左：（X DX - 20）+PX}）； / / DIV动态货位分配
this.find美元（。掩码）。Css（{左：（X dx-30）+PX}）；
}
}
}）；
验证数据
功能码（码）{
无功iscur = false；
ajax仿真
setTimeout（）{（）函数（
如果（iscur）{
checkcoderesult（1，验证通过）；
this.find美元（。code-k-div ）藏（）；
Opts.callback（{代码：1000，味精：验证通过
其他{ }
divmove.addclass美元（错误）；
checkcoderesult（0，审核不通过）；
Opts.callback（{代码：1001，味精：审核不通过}）；
setTimeout（）{（）函数（
divmove.removeclass美元（错误）；
this.find美元（。掩码）。动画（{左：0px}，200）；
divmove.animate美元（{左：10px}，200）；
}，400）；
}
}，500）
}
结果
功能checkcoderesult（我，TXT）{
如果（i = 0）{
this.find美元（代码提示），AddClass（代码提示红）；
其他{ }
this.find美元（代码提示），AddClass（代码提示绿色）；
}
this.find美元（代码提示）。Html（TXT）；
}
}）
}
}（jQuery）；
CSS部分：

code_bg {。
位置：固定；
顶部：0；
左：0；
权利：0；
底部：0；
背景颜色：RGBA（0,0,0，。5）；
Z指数：99；
}
图标登录
背景图像：URL（。 / / / loginicon IMG图标，PNG）；
后台重复：不重复；
}
代码{
位置：绝对；
上图：100px；
宽度：320px；
左：50%；
margin-left: - 160px；
背景颜色：# FFF；
Z指数：100；
-moz用户选择：无；
WebKit的用户选择：无；
}
代码img {。
保证金：5px 5px；
填料：5px 5px；
背景颜色：# f5f6f7；
}
代码IMG {。
显示块；
}
icon-w-25 {。
显示：内联块；
宽度：25px；
身高：25px；
文本缩进：- 9999px；
}
图标推{
光标：指针；
背景位置：- 149px - 95px；
}
代码推{
身高：25px；
}
{代码按钮。
职位：相对；
身高：30px；
文本对齐：中心；
颜色：# 999；
保证金：10px 10px；
盒尺寸：边框框；
背景颜色：# f5f6f7；
边界半径：15px；
边境：1px solid # e1e1e1；
}
code-btn-m {。
位置：绝对；
宽度：40px；
身高：40px；
边框半径：50%；
背景颜色：# f5f6f7；
边境：1px solid # e1e1e1；
Z指数：5；
上图：- 8px；
左：10px；
盒子的影子：00 3px # CCC；
光标：指针；
背景位置：- 63px 10px；
}
img {代码按钮。
背景图像：URL（。 / / / codejt IMG图标，PNG）；
后台重复：不重复；
}
。代码BTN IMG主动{。
背景位置：- 134px 10px；
}
。代码BTN IMG。错误{
背景位置：8px 10px；
}
代码IMG CON {。
职位：相对；
}
代码掩码{
位置：绝对；
顶部：0；
左：0；
Z指数：10；
}
代码提示{
左：10px填充；
字体大小：12px；
颜色：# 999；
}
代码提示红色{
颜色：红色；
}
代码提示绿色{
颜色：绿色；
}
HTML的一部分：

$（# imgscode ）Imgcode（）；

设计素描 uff1a
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。