首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】

Posted in jQuery onSeptember 10, 2019

电脑和手机移动端都适用的jQuery拖动滑块图片拼图验证码插件，通过鼠标拖动或触屏滑动填充拼图来进行安全验证，点击刷新可以更换当前待验证的图片。

HTML & css：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖动滑块图片拼图验证码插件</title>
<!--框架样式-->
<link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<!--图标样式-->
<link href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css" rel="stylesheet">
<!--主要样式-->
<link href="disk/slidercaptcha.css" rel="external nofollow" rel="stylesheet" />
<style>
.slidercaptcha {
 margin: 0 auto;
 width: 314px;
 height: 286px;
 border-radius: 4px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.125);
 margin-top: 40px;
}
.slidercaptcha .card-body {
 padding: 1rem;
}
.slidercaptcha canvas:first-child {
 border-radius: 4px;
 border: 1px solid #e6e8eb;
}
.slidercaptcha.card .card-header {
 background-image: none;
 background-color: rgba(0, 0, 0, 0.03);
}
.refreshIcon {
 top: -54px;
}
</style>
</head>
<body>
<div class="container-fluid">
 <div class="form-row">
 <div class="col-12">
 <div class="slidercaptcha card">
 <div class="card-header">
  <span>请完成安全验证</span>
 </div>
 <div class="card-body"><div id="captcha"></div></div>
 </div>
 </div>
 </div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="disk/longbow.slidercaptcha.js"></script>
<script>
 $('#captcha').sliderCaptcha({
 repeatIcon: 'fa fa-redo',
 setSrc: function () {
 return 'http://images.sdgxgz.com/Pic' + Math.round(Math.random() * 136) + '.jpg';
 },
 onSuccess: function () {
 alert('验证通过!');
 }
 });
</script>
</body>
</html>
disk/slidercaptcha.css：
body {
 overflow-x: hidden;
}
.block {
 position: absolute;
 left: 0;
 top: 0;
}
.sliderContainer {
 position: relative;
 text-align: center;
 line-height: 40px;
 background: #f7f9fa;
 color: #45494c;
 border-radius: 2px;
}
.sliderbg {
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 background-color: #f7f9fa;
 height: 40px;
 border-radius: 2px;
 border: 1px solid #e6e8eb;
}
.sliderContainer_active .slider {
 top: -1px;
 border: 1px solid #1991FA;
}
.sliderContainer_active .sliderMask {
 border-width: 1px 0 1px 1px;
}
.sliderContainer_success .slider {
 top: -1px;
 border: 1px solid #52CCBA;
 background-color: #52CCBA !important;
}
.sliderContainer_success .sliderMask {
 border: 1px solid #52CCBA;
 border-width: 1px 0 1px 1px;
 background-color: #D2F4EF;
}
.sliderContainer_success .sliderIcon:before {
 content: "\f00c";
}
.sliderContainer_fail .slider {
 top: -1px;
 border: 1px solid #f57a7a;
 background-color: #f57a7a !important;
}
.sliderContainer_fail .sliderMask {
 border: 1px solid #f57a7a;
 background-color: #fce1e1;
 border-width: 1px 0 1px 1px;
}
.sliderContainer_fail .sliderIcon:before {
 content: "\f00d";
}
.sliderContainer_active .sliderText, .sliderContainer_success .sliderText, .sliderContainer_fail .sliderText {
 display: none;
}
.sliderMask {
 position: absolute;
 left: 0;
 top: 0;
 height: 40px;
 border: 0 solid #1991FA;
 background: #D1E9FE;
 border-radius: 2px;
}
.slider {
 position: absolute;
 top: 0;
 left: 0;
 width: 40px;
 height: 40px;
 background: #fff;
 box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
 cursor: pointer;
 transition: background .2s linear;
 border-radius: 2px;
 display: flex;
 align-items: center;
 justify-content: center;
}
.slider:hover {
 background: #1991FA;
}
.slider:hover .sliderIcon {
 background-position: 0 -13px;
}
.sliderText {
 position: relative;
}
.sliderIcon {
}
.refreshIcon {
 position: absolute;
 right: 0;
 top: 0;
 cursor: pointer;
 margin: 6px;
 color: rgba(0,0,0,.25);
 font-size: 1rem;
 z-index: 5;
 transition: color .3s linear;
}
 .refreshIcon:hover {
 color: #6c757d;
 }
disk/longbow.slidercaptcha.js：
(function ($) {
 'use strict';
 var SliderCaptcha = function (element, options) {
  this.$element = $(element);
  this.options = $.extend({}, SliderCaptcha.DEFAULTS, options);
  this.$element.css({ 'position': 'relative', 'width': this.options.width + 'px', 'margin': '0 auto' });
  this.init();
 };
 SliderCaptcha.VERSION = '1.0';
 SliderCaptcha.Author = 'argo@163.com';
 SliderCaptcha.DEFAULTS = {
  width: 280,  // canvas宽度
  height: 155, // canvas高度
  PI: Math.PI,
  sliderL: 42, // 滑块边长
  sliderR: 9,  // 滑块半径
  offset: 5,  // 容错偏差
  loadingText: '正在加载中...',
  failedText: '再试一次',
  barText: '向右滑动填充拼图',
  repeatIcon: 'fa fa-repeat',
  maxLoadCount: 3,
  localImages: function () {
   return 'images/Pic' + Math.round(Math.random() * 4) + '.jpg';
  }
 };
 function Plugin(option) {
  return this.each(function () {
   var $this = $(this);
   var data = $this.data('lgb.SliderCaptcha');
   var options = typeof option === 'object' && option;
   if (data && !/reset/.test(option)) return;
   if (!data) $this.data('lgb.SliderCaptcha', data = new SliderCaptcha(this, options));
   if (typeof option === 'string') data[option]();
  });
 }
 $.fn.sliderCaptcha = Plugin;
 $.fn.sliderCaptcha.Constructor = SliderCaptcha;
 var _proto = SliderCaptcha.prototype;
 _proto.init = function () {
  this.initDOM();
  this.initImg();
  this.bindEvents();
 };
 _proto.initDOM = function () {
  var createElement = function (tagName, className) {
   var elment = document.createElement(tagName);
   elment.className = className;
   return elment;
  };
  var createCanvas = function (width, height) {
   var canvas = document.createElement('canvas');
   canvas.width = width;
   canvas.height = height;
   return canvas;
  };
  var canvas = createCanvas(this.options.width - 2, this.options.height) // 画布
  var block = canvas.cloneNode(true) // 滑块
  var sliderContainer = createElement('div', 'sliderContainer');
  var refreshIcon = createElement('i', 'refreshIcon ' + this.options.repeatIcon);
  var sliderMask = createElement('div', 'sliderMask');
  var sliderbg = createElement('div', 'sliderbg');
  var slider = createElement('div', 'slider');
  var sliderIcon = createElement('i', 'fa fa-arrow-right sliderIcon');
  var text = createElement('span', 'sliderText');
  block.className = 'block'
  text.innerHTML = this.options.barText;
  var el = this.$element;
  el.append($(canvas));
  el.append($(refreshIcon));
  el.append($(block));
  slider.appendChild(sliderIcon);
  sliderMask.appendChild(slider);
  sliderContainer.appendChild(sliderbg);
  sliderContainer.appendChild(sliderMask);
  sliderContainer.appendChild(text);
  el.append($(sliderContainer));
  Object.assign(this, {
   canvas,
   block,
   sliderContainer: $(sliderContainer),
   refreshIcon,
   slider,
   sliderMask,
   sliderIcon,
   text: $(text),
   canvasCtx: canvas.getContext('2d'),
   blockCtx: block.getContext('2d')
  })
 };
 _proto.initImg = function () {
  var that = this;
  var isIE = window.navigator.userAgent.indexOf('Trident') > -1;
  var L = this.options.sliderL + this.options.sliderR * 2 + 3; // 滑块实际边长
  var drawImg = function (ctx, operation) {
   var l = that.options.sliderL;
   var r = that.options.sliderR;
   var PI = that.options.PI;
   var x = that.x;
   var y = that.y;
   ctx.beginPath()
   ctx.moveTo(x, y)
   ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI)
   ctx.lineTo(x + l, y)
   ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI)
   ctx.lineTo(x + l, y + l)
   ctx.lineTo(x, y + l)
   ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true)
   ctx.lineTo(x, y)
   ctx.lineWidth = 2
   ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
   ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'
   ctx.stroke()
   ctx[operation]()
   ctx.globalCompositeOperation = isIE ? 'xor' : 'overlay'
  }
  var getRandomNumberByRange = function (start, end) {
   return Math.round(Math.random() * (end - start) + start);
  };
  var img = new Image();
  img.crossOrigin = "Anonymous";
  var loadCount = 0;
  img.onload = function () {
   // 随机创建滑块的位置
   that.x = getRandomNumberByRange(L + 10, that.options.width - (L + 10));
   that.y = getRandomNumberByRange(10 + that.options.sliderR * 2, that.options.height - (L + 10));
   drawImg(that.canvasCtx, 'fill');
   drawImg(that.blockCtx, 'clip');
   that.canvasCtx.drawImage(img, 0, 0, that.options.width - 2, that.options.height);
   that.blockCtx.drawImage(img, 0, 0, that.options.width - 2, that.options.height);
   var y = that.y - that.options.sliderR * 2 - 1;
   var ImageData = that.blockCtx.getImageData(that.x - 3, y, L, L);
   that.block.width = L;
   that.blockCtx.putImageData(ImageData, 0, y);
   that.text.text(that.text.attr('data-text'));
  };
  img.onerror = function () {
   loadCount++;
   if (window.location.protocol === 'file:') {
    loadCount = that.options.maxLoadCount;
    console.error("can't load pic resource file from File protocal. Please try http or https");
   }
   if (loadCount >= that.options.maxLoadCount) {
    that.text.text('加载失败').addClass('text-danger');
    return;
   }
   img.src = that.options.localImages();
  };
  img.setSrc = function () {
   var src = '';
   loadCount = 0;
   that.text.removeClass('text-danger');
   if ($.isFunction(that.options.setSrc)) src = that.options.setSrc();
   if (!src || src === '') src = 'https://picsum.photos/' + that.options.width + '/' + that.options.height + '/?image=' + Math.round(Math.random() * 20);
   if (isIE) { // IE浏览器无法通过img.crossOrigin跨域，使用ajax获取图片blob然后转为dataURL显示
    var xhr = new XMLHttpRequest()
    xhr.onloadend = function (e) {
     var file = new FileReader(); // FileReader仅支持IE10+
     file.readAsDataURL(e.target.response);
     file.onloadend = function (e) {
      img.src = e.target.result;
     }
    }
    xhr.open('GET', src);
    xhr.responseType = 'blob';
    xhr.send();
   } else img.src = src;
  };
  img.setSrc();
  this.text.attr('data-text', this.options.barText);
  this.text.text(this.options.loadingText);
  this.img = img
 };
 _proto.clean = function () {
  this.canvasCtx.clearRect(0, 0, this.options.width, this.options.height);
  this.blockCtx.clearRect(0, 0, this.options.width, this.options.height);
  this.block.width = this.options.width;
 };
 _proto.bindEvents = function () {
  var that = this;
  this.$element.on('selectstart', function () {
   return false;
  });
  $(this.refreshIcon).on('click', function () {
   that.text.text(that.options.barText);
   that.reset();
   if ($.isFunction(that.options.onRefresh)) that.options.onRefresh.call(that.$element);
  });
  var originX, originY, trail = [],
   isMouseDown = false
  var handleDragStart = function (e) {
   if (that.text.hasClass('text-danger')) return;
   originX = e.clientX || e.touches[0].clientX;
   originY = e.clientY || e.touches[0].clientY;
   isMouseDown = true;
  };
  var handleDragMove = function (e) {
   if (!isMouseDown) return false;
   var eventX = e.clientX || e.touches[0].clientX;
   var eventY = e.clientY || e.touches[0].clientY;
   var moveX = eventX - originX;
   var moveY = eventY - originY;
   if (moveX < 0 || moveX + 40 > that.options.width) return false;
   that.slider.style.left = (moveX - 1) + 'px';
   var blockLeft = (that.options.width - 40 - 20) / (that.options.width - 40) * moveX;
   that.block.style.left = blockLeft + 'px';
   that.sliderContainer.addClass('sliderContainer_active');
   that.sliderMask.style.width = (moveX + 4) + 'px';
   trail.push(moveY);
  };
  var handleDragEnd = function (e) {
   if (!isMouseDown) return false
   isMouseDown = false
   var eventX = e.clientX || e.changedTouches[0].clientX
   if (eventX == originX) return false
   that.sliderContainer.removeClass('sliderContainer_active');
   that.trail = trail
   var {
    spliced,
    verified
   } = that.verify()
   if (spliced && verified) {
    that.sliderContainer.addClass('sliderContainer_success');
    if ($.isFunction(that.options.onSuccess)) that.options.onSuccess.call(that.$element);
   } else {
    that.sliderContainer.addClass('sliderContainer_fail');
    if ($.isFunction(that.options.onFail)) that.options.onFail.call(that.$element);
    setTimeout(() => {
     that.text.text(that.options.failedText);
     that.reset();
    }, 1000);
   }
  };
  this.slider.addEventListener('mousedown', handleDragStart);
  this.slider.addEventListener('touchstart', handleDragStart);
  document.addEventListener('mousemove', handleDragMove);
  document.addEventListener('touchmove', handleDragMove);
  document.addEventListener('mouseup', handleDragEnd);
  document.addEventListener('touchend', handleDragEnd);
  document.addEventListener('mousedown', function () { return false; });
  document.addEventListener('touchstart', function () { return false; });
 };
 _proto.verify = function () {
  var sum = function (x, y) { return x + y; };
  var square = function (x) { return x * x; };
  var arr = this.trail // 拖动时y轴的移动距离
  var average = arr.reduce(sum) / arr.length;
  var deviations = arr.map(function (x) { return x - average; });
  var stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length);
  var left = parseInt(this.block.style.left);
  return {
   spliced: Math.abs(left - this.x) < this.options.offset,
   verified: stddev !== 0, // 简单验证下拖动轨迹，为零时表示Y轴上下没有波动，可能非人为操作
  }
 };
 _proto.reset = function () {
  this.sliderContainer.removeClass('sliderContainer_fail sliderContainer_success');
  this.slider.style.left = 0
  this.block.style.left = 0
  this.sliderMask.style.width = 0
  this.clean()
  this.text.attr('data-text', this.text.text());
  this.text.text(this.options.loadingText);
  this.img.setSrc();
 };
})(jQuery);

附录1：需要注意css和js的引用路径；

总结

以上所述是小编给大家介绍的html+jQuery实现拖动滑块图片拼图验证码插件希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】

- Author -

1

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jQuery实现中奖播报功能（让文本滚动起来） 简单设置数值即可
Mar 20 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 #jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 #jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 #jQuery
Jquery动态列功能完整实例
Aug 30 #jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 #jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 #jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 #jQuery
postcss-px2rem(1) 绝对定位(1) ref(1) lua(3) 相对定位(1) ECharts(3) 匹配(1) mixin(1) props(1) geoserver(1)
You might like
php 使用ActiveMQ发送消息，与处理消息操作示例
2020/02/23 PHP
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
js实现简单的验证码
2015/12/25 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
js定时器实例分享
2016/12/20 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
python实现simhash算法实例
2014/04/25 Python
pycharm 使用心得（九）解决No Python interpreter selected的问题
2014/06/06 Python
Python学习之asyncore模块用法实例教程
2014/09/29 Python
python抓取最新博客内容并生成Rss
2015/05/17 Python
Python探索之pLSA实现代码
2017/10/25 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
打造经典复古风格的品牌：Alice + Olivia（爱丽丝+奥利维亚）
2016/09/07 全球购物
幼儿园开学温馨提示
2015/07/15 职场文书
80后创业总结的9条职场用人思想，记得收藏
2019/08/13 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
Go语言读取txt文档的操作方法
2022/01/22 Golang