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插件实现图片滑动验证码

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

时间: 2017-10-23

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

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制作图形验证码实现代码

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

js实现简单的验证码

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

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

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

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

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

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

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

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

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

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

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

Linux虚拟机中node.js之开发环境搭建

先说下nodejs这个哦,有人以为它是一种语言,其实不是,它是一个平台.下面来说下本次的话题:Vmware虚拟机node.js之开发环境搭建 一.安装linux系统 (已安装linux可跳此步骤) 虚拟机推荐选择:VirtualBox 或者 Vmware (专业版永久激活码:5A02H-AU243-TZJ49-GTC7K-3C61N) 我这里使用Vmware. 安装好Vmware后,点击新建虚拟机,选择稍后安装操作系统,然后进行配置.虚拟机设置如下: { 客户机操作系统:其他: 版本:其他64位

java web中图片验证码功能的简单实现方法

用户在注册网站信息的时候基本上都要数据验证码验证.那么图片验证码功能该如何实现呢? 大概步骤是: 1.在内存中创建缓存图片 2.设置背景色 3.画边框 4.写字母 5.绘制干扰信息 6.图片输出 废话不多说,直接上代码 package com.lsgjzhuwei.servlet.response; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.Buffer

Java Web开发之图形验证码的生成与使用方法

本文实例讲述了Java Web开发之图形验证码的生成与使用方法.分享给大家供大家参考.具体如下: 图形验证码的主要目的是为了增强的安全性,增加用户通过遍历所有可能性来破解密码的难度. 图形验证码的使用包括如下3部分: ① 图形验证码的生成: ② 在页面中的使用: ③ 验证: 1.图形验证码的生成 假设在Servlet生成图形验证码,在JavaBean或者JSP中生成的基本过程是相同的.设计如下过程: ① 设置响应的文档类型: ② 生成随机码: ③ 把随机码保存到session中: ④ 生成图片:

Web 开发中Ajax的Session 超时处理方法

在 Java Web 开发中,当session超时的情况下,普通页面的跳转好处理.关于Ajax的请求超时处理,就需要特殊处理下了. 先写一个统一的过滤器,或者拦截器,针对Ajax请求进行过滤处理,下面示例以Filter为例: public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServ

Web开发中客户端的跳转与服务器端的跳转的区别

客户端的跳转:跳转之后地址栏的信息是会变的,变为跳转之后的地址信息 例如:response.sendRedirect(); 服务器端的跳转:跳转之后的地址栏的信息不会发生任何的改变 例如:<jsp:forword> request.getRequestDisPather("").forword(request, response); (1).而且在使用request属性范围时,只有服务器端跳转才能将request范围的属性保存到跳转页面:而如果是客户端的跳转,则无法进行re

web开发中添加数据源实现思路

在web开发中,可以利用hibernate配置数据源,但在实际的应用中,可能要连接多个数据源, 1.配置dataSource <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource"> <property name="driverClassName"> <value>org.logicalc

java web开发中大量数据导出Excel超时(504)问题解决

import java.io.IOException; import java.io.OutputStream; import java.lang.reflect.Field; import java.text.SimpleDateFormat; import java.util.Date; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.Map.Entry; impo

利用Node.js+Koa框架实现前后端交互的方法

前言 对于一个前端工程师来说不仅仅要会前端的内容,后端的技术也需要熟练掌握.今天我就要通过一个案例来描述一下前端是如何和后端进行数据交互的. koa 是由 Express 原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的 Web 框架.使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重复繁琐的回调函数嵌套,并极大地提升错误处理的效率.koa 不在内核方法中绑定任何中间件,它仅仅提供了一个轻量优雅的函数库,使得编写 Web 应用变得得心应手. 准备工作 首先

Asp.net开发之webform图片水印和图片验证码的实现方法

两者都需要引入命名空间:using System.Drawing; 一.图片水印 前台Photoshuiyin.aspx代码: <div> <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Button ID="Button1" runat="server" Text="上传" /><br /> &