js plug-in implements image sliding verification code example sharing-JS Tutorial-php.cn

Picture sliding verification code, the logic is to judge whether it is a human operation based on the mouse sliding trajectory, coordinate position, calculation of drag speed, etc. Of course, the following code only implements the front-end part and only records the drag coordinates. This article mainly introduces the js plug-in to implement the image sliding verification code and sliding module in detail to realize the verification function. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Let’s start with the code and make a backup record

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) && x
        
         Copy after login

css part:

.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; }

Copy after login

html part:

Copy after login

Rendering:

I hope it will help everyone according to the above ideas, you can try it yourself .

Related recommendations:

jQuery Ajax displays right and wrong numbers to verify whether the input verification code is correct

##Mobile phone Countdown function for sending verification code when registering

How to use PHP to send SMS verification code

The above is the detailed content of js plug-in implements image sliding verification code example sharing. For more information, please follow other related articles on the PHP Chinese website!