js插件实现图片滑动验证码
2020-01-17 08:51:46来源:爱站网 阅读 ()
图片幻灯片验证码,逻辑是根据鼠标的幻灯片轨迹等来确定是否人工进行操作,当然,下面的代码只是实现前端部分,只记录拖动坐标,接下来爱站技术频道小编就来给大家讲解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 = '<div class="code-k-div">' + '<div class="code_bg"></div>' + '<div class="code-con">' + '<div class="code-img">' + '<div class="code-img-con">' + '<div class="code-mask"><img src="../img/front(1).png"></div>' + '<img src="../img/back(1).png"></div>' + '<div class="code-push"><i class="icon-login-bg icon-w-25 icon-push">刷新</i><span class="code-tip"></span></div>' + '</div>' + '<div class="code-btn">' + '<div class="code-btn-img code-btn-m"></div>' + '<span>按住滑块,拖动完成上方拼图</span>' + '</div></div></div>'; $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<dX+$(this).width()-20){ $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部分:
<div id="imgscode"></div> <script> $("#imgscode").imgcode(); </script>
效果图:
以上就是爱站技术频道小编带给大家的js插件实现图片滑动验证码,我们在平时的生活中不妨多多学习其他专业知识,这是非常不错的哦。
原文链接:https://js.aizhan.com/develop/JavaScript/11186.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- js防止表单重复提交实现代码 2020-03-29
- Jquery插件写法笔记整理 2020-03-29
- 基于JQuery的多标签实现代码 2020-03-29
- Jquery图形报表插件 jqplot简介及参数详解 2020-03-25
- jQuery插件开发全解析 2020-03-25
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash