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>

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-10-23

JS/jQ实现免费获取手机验证码倒计时效果

最近做了一个项目,其中有项目需求涉及到手机号验证码,就是当用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个实现代码. 如何获取手机验证码? 小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的. LeanCloud :https://leancloud.cn/ 文档:https://leancloud.cn/docs/sms_guide-js.html 在这个平台首先去要注册一个账号,在设置里面

js实现点击获取验证码倒计时效果

网站中为了防止恶意获取验证短信.验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果.实现这个功能,一个setInterval和一个clearInterval就能搞定了,不需要太多的代码.实例效果和代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <input type="button" style="height:

js生成验证码并直接在前端判断

js生成验证码并直接在前端判断 <script type="text/javascript" src="img/jquery-1.5.1.min.js"></script> <script language="javascript" type="text/javascript"> var code; //在全局 定义验证码 var code2; //在全局 定义验证码 function cr

node.js WEB开发中图片验证码的实现方法

用node做web开发很多都可能碰到需要验证码的地方,之前在github上搜索,有一些比如node-captcha等的类库,都需要依赖第三方的图形处理库或者软件,像我之前安装cario这个图形库时,真是费了好大一番劲,但是其实我们只用到了这些图形库的一点点小功能,比如图片的尺寸修改裁剪,或者生产验证码. 先介绍一下CImg这个c++的图形库吧,CImg是一个跨平台的C++的图像处理库,提供了加载.处理.显示.保存等一系列功能,最吸引人的地方是整个图形库就一个CImg.h这个文件,所以非常的便携绿

JS制作图形验证码实现代码

第一步我们来到要展示验证码的页面,当我们按下营业执照的时候让其,弹出一个弹框,弹框的上面就是验证码,如图一所示: (图一) 弹框的样式如图二所示: (图二) 我们要对验证码的值进行校验,判断验证码是否输入正确,当输入不正确的时候,我们提示错误信息,提示信息如图三所示: (图三) 如果页面了验证正确,这不会提示错误信息并且调到我们的目标页面,如图四所示: (图四) 路由层描述 /** 供货商店铺-店铺简介 */ //1-在路由层进行设置,页面跳转到根目录下/buyer/vshop/info.ejs

js生成的验证码的实现与技术分析

分享给大家一段js生成验证码并验证的代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>

js实现发送验证码后的倒计时功能

之前分享过只用js实现倒计时的功能,后来测试时发现,刷新或关闭网页后,倒计时就不能用了.网上也没找到合适的解决方案,所以自己就写了个,这次的算是优化版吧,能满足刷新或重新打开网页后,倒计时依然能用 特别说明: cookie最初创建的有效时间是60秒.也就是说,你如果在倒计时为20的时候,关闭网页.20秒之后再打开,是不会有倒计时显示的;但是,如果倒计时为20时,关闭页面,如果在20秒内重新打开页面,是有倒计时显示的. html代码 <input id="second" type=

js实现简单的验证码

验证码大家应该不陌生,主要是为了网站的安全性,防止恶意注册和登陆.验证码实现的方式各有不同,下面是一段用javascript实现的验证码效果,供大家参考之用,希望能够给大家带来帮助. 运行效果图: 代码如下: <html> <head> <title>js验证码</title> <style type="text/css"> .code { background:url(code_bg.jpg); font-family:Ar

Jsp生成页面验证码的方法[附代码]

image.jsp------------------------------生成随机验证码图片的Jsp页面 代码如下:  复制代码 代码如下: <%@ page contentType="image/jpeg" import="java.awt.*, java.awt.image.*,java.util.*,javax.imageio.*" %> <%! Color getRandColor(int fc,int bc) { Random ran

JavaScript 验证码的实例代码(附效果图)

效果如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">    <title></title>    <style type="text/css">    .code    {            background:url(code_bg.jpg);            f

jquery多选项卡效果实例代码(附效果图)

复制代码 代码如下: <script type="text/javascript">    $(function() {        $(".designerspanel").each(function(){            $(this).find(".tabspanel #show:not(:first)").hide();        }); $(".designerspanel li").clic

AngularJS 实现点击按钮获取验证码功能实例代码

html :样式采用了sui框架的样式,请自行引入查看,AngularJS,自己引入, <div ng-controller="forGetPassword" ng-app="routingDemoApp"> <form novalidate name="forget"> <header class="bar bar-nav"> <a href="javascript:his

Android绘制验证码的实例代码

在前面仿华为加载动画.仿网易音乐听歌识曲-麦克风动画中,我们通过绘图的基础知识完成了简单的绘制.在本例中,我们将绘制常见的验证码. 一.效果图 二.知识点与思路分析 通过上面的效果图观察,我们可以看到里面有绘制的随机线条,随机绘制的验证码. 绘制线条,直线或曲线 绘制文本,生成的验证码文本的绘制 绘制圆点. 三.代码编写 /** * Created by Iflytek_dsw on 2017/7/3. */ public class IdentifyCodeUtil { private sta

JAVA验证码工具实例代码

工具类: package com.lhy.web.servlet; import java.awt.BasicStroke; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.FileNotFoundException; import java.io.FileOutputStream; import

Web制作验证码功能实例代码

web开发中,经常会使用验证码功能,例如登录.注册,或其他关键功能之前经常会使用.合理使用 验证功能可以防止ddos攻击.爬虫攻击等.   实现效果:   实现原理: 由后台提供生成验证码的接口,前端每次请求会后端会生成验证码图片和验证码,验证码图片发送到客户端供客户端显示, 验证码字符串保存再后端的Session中,待前端再次请求业务接口与session里的验证码字符串做比对.    实现思路: 1.先由后端提供可以生产验证码图片的接口 2.前端通过 img 中设置 src 属性,请求验证码生

JavaScript实现翻页功能(附效果图)

效果图: 要点: displayPage('#pageDiv','goPage','query',10,1,100); #pageDiv是显示翻页的div名称. goPage是跳转到后面的文本输入框的id,如果有需要可以根据 * 这个参数直接赋值. query是查询的方法名称. 10是总页数 1是当前页数 100是总条数. <%@ page language="java" contentType="text/html;charset=UTF-8" pageEn

Java生成验证码功能实例代码

页面上输入验证码是比较常见的一个功能,实现起来也很简单.给大家写一个简单的生成验证码的示例程序,需要的朋友可以借鉴一下. 闲话少续,直接上代码.代码中的注释很详细. package com.SM_test.utils; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.RenderingHints; import ja

python验证码识别实例代码

本文研究的主要是Python验证码识别的相关代码,具体如下. Talk is cheap, show you the Code! import numpy as np import matplotlib.pyplot as plt from sklearn.cluster import KMeans from PIL import Image #打开图像 im=np.array(Image.open('yzm.png')) #得到图像3个维度 h,w,san=im.shape X=[(h-x,y

Android栗子の图片验证码生成实例代码

废话不多说了,下面一段代码给大家分享android 生成栗子图片验证码功能,具体代码如下所示: import java.util.Random; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; public class