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();
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html滑动验证图片,js插件实现图片滑动验证码相关推荐
- html如何做滑动门效果,JS+CSS实现简单滑动门(滑动菜单)效果
本文实例讲述了JS+CSS实现简单滑动门的方法.分享给大家供大家参考.具体如下: 这是一款超简约设计的滑动门菜单,鼠标放到主菜单上,里面的内容会跟着变化,实际上本演示是一个范例,从代码中的注释你就能感 ...
- spritespin.js插件实现图片360度旋转
1. 官网:http://spritespin.ginie.eu/: SpriteSpin是一个jQuery插件,可将图像帧转换为动画.它需要一个图像阵列或一个精确的精灵片,并像翻转书一样逐帧播放它们 ...
- html中图片鼠标滑动的效果,JS DOM实现鼠标滑动图片效果
经常,我们在浏览各种网页的时候,都会有各种动画效果展示,像下图所示的是很多网上商城常用的货品展示方式,同类的货品并排展现在窗口上,用户如果看中了哪一款商品想要查看详情的话,只要将鼠标放上该商品的区域, ...
- cropper.js插件做图片上传裁剪图片大小
前端代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="U ...
- 图片浏览插件(支持图片轮播、上下张查看、放大缩小、旋转)
应用场景: 在页面上显示图片,但图片太小,不方便观看. 在页面展示的原图: 使用插件查看的效果图: 主要功能: 支持选项 支持方法 支持事件 支持触摸 支持移动 支持缩放 支持旋转 支持键盘 跨浏览 ...
- 单选按钮html图片,js实现的 图片单选按钮效果
[实例简介]用js实现的radio图片选择按钮效果. [实例截图] [核心代码] 用JS实现的radio图片选择按钮效果-脚本之家 .lanrentuku img{border:1px solid # ...
- html商品图片放大插件,PS图片无损放大/图像处理插件-ON1 Resize 2018.5
PS图片无损放大/图像处理插件-ON1 Resize 2018.5 书法字体2019.03.30ON1 Resize ON1 Resize 2018是专门为摄影师打造的一款功能强大的照片后期处理软件, ...
- vscode在html预览看到图片的插件_HTML5图片水面倒影和波纹动画,超逼真
插件简介 HTML5确实是非常强大,尤其是Canvas的灵活使用.今天要分享的也是一款基于HTML5 Canvas的图片水面倒影和波纹动画,利用这款应用我们可以将任意一张图片添加水面倒影的特效,并且添 ...
- Wow.js插件实现上下滑动重复渐入效果
wow.js默认情况下只执行一次,如果想实现上下滑动,重复执行,则需要修改wow.js源码,如下: (function() {var MutationObserver, Util, WeakMap, ...
- vue实现图片滑动验证功能——功能实现
图片滑动验证,是目前比较常见的验证方式,主要目的是防止用户利用机器人自动注册.登录.灌水. 目前vue技术日趋成熟,已经有专门针对图片滑动验证功能的插件了.具体使用方式如下: 1.安装插件--npm ...
最新文章
- aspen软件对电脑的要求_BIM软件对电脑配置的要求——Fuzor软件对电脑配置的要求...
- 理解extract_patches_2d
- 力扣两数之和 II - 输入有序数组
- python程序中想使用正则表达式_python中正则表达式的使用方法
- unity3d 虚拟博物馆_基于Unity3D的虚拟博物馆信息可视化系统①
- startssl申请免费ssl证书
- 三级网络-不单单是学知识
- 理解Python中的继承规则和继承顺序
- 既然现在处理器性能过剩,为什么PC用起来不流畅?
- python 无法初始化设备prn_彻底搞懂Python一切皆对象,面试必过
- 一个...买裤子的全过程
- 阿里总裁马云对于第5个经济体技术有着独特的见解
- 远程连接virtualBox本地虚拟机并访问虚拟机服务
- 配置nginx报错no “ssl_certificate“ is defined in server listening on SSL port while SSL handshaking
- win10用户名与计算机名字一样,win10电脑账户名和其他信息怎么更改
- 哪种方式的电子签名更可靠?
- kettle将文件路径定义为_Kettle 文件操作
- 在片段着色器中通过对uv进行多重变换实现丰富的纹理表现效果(GLSL源码)示例
- 微信小程序选择图片(相册中选择/相机拍摄)
- 数学建模学习笔记(第三章:量纲分析法,量纲齐次原则)