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

本文链接：https://blog.csdn.net/allen_csdns/article/details/103270404

一、index.html

<!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="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><!--图标样式-->
<link href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"><!--主要样式-->
<link href="拼图.css" 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="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="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>

二、拼图.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;}

三、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 = 2ctx.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 = falsevar 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 falseisMouseDown = falsevar eventX = e.clientX || e.changedTouches[0].clientXif (eventX == originX) return falsethat.sliderContainer.removeClass('sliderContainer_active');that.trail = trailvar {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 = 0this.block.style.left = 0this.sliderMask.style.width = 0this.clean()this.text.attr('data-text', this.text.text());this.text.text(this.options.loadingText);this.img.setSrc();};
})(jQuery);

公众号：
在这里插入图片描述
微信：

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

使用 chroot 监狱限制 SSH 用户访问指定目录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/netgc/article/details/103270160使用 chroot 监狱限制 SSH 用户访问指定目录将 SSH 用户会话限制访问到特定的目录内，特…...
2024/4/7 8:16:58
并查集算法
原文链接：https://blog.csdn.net/dm_vincent/article/details/7655764出处链接：https://blog.csdn.net/dm_vincent/article/details/7655764本文主要介绍解决动态连通性一类问题的一种算法，使用到了一种叫做并查集的数据结构，称为Union-Find。更多的信息可以参考Algorithms…...
2024/4/20 6:29:03
XSS攻击Filter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/qq_35830057/article/details/103263465private String stripXSS(String value) {if (value != null) {// NOTE: It‘s hig…...
2024/4/23 20:51:09
BJFU_数据结构习题_295基于双向链表的双向冒泡排序法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/weixin_43722827/article/details/103257814欢迎登录北京林业大学OJ系统 http://www.bjfuacm.com 295基于双向链表的双向冒…...
2024/4/19 15:36:55
HDU 1000.A + B Problem：~scanf("%d%d",&a,&b)表示什么意思输入字母字符为什么会进入死循环
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/YY51930460/article/details/103258893最近在刷杭电的题目在此记录下自己踩过的坑希望即将到来的比赛能取得好成绩话不…...
2024/4/22 17:09:31
python基础——数据类型
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/qq_43593912/article/details/103250248一、变量什么是变量？当你把值赋给一个名字时，它会存储在内存中，把这块内存称为…...
2024/4/3 6:48:55
抽象类，接口的区别与使用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/qq_43117793/article/details/103262854抽象类 1.is a 关系。（是不是）对事物的抽象。抽象类=普通类+抽象方法 2.继承…...
2024/4/24 13:47:19
刷牙
这是发生在我小时候的一件事。那时，不知道为什么，我特别不爱刷牙，于是就引出了这个故事。那是个炎热的夏天。早上，温暖的阳光透过薄薄的窗帘，照在我的脸上，把我叫醒了。老让爸爸、妈妈催着刷牙多烦呀。算啦，还是主动一些吧。趁着爸爸、妈妈没起，我就已经把牙刷完了，并…...
2024/4/25 8:30:56
Java基础之代码块
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/weixin_43171186/article/details/103263104在java中一对{}包裹的代码就叫做代码块；块{} : 是一个作用域 1、 {}写在方法…...
2024/4/19 22:39:21
渠道包测试流程（从电脑向手机传输apk文件）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/lmm0513/article/details/1032630671. 获取apk文件，扩展名确保正确2. 手机、电脑通过数据线进行连接3. 手机设置为传输文件…...
2024/4/2 12:04:01
Docker Images: 构建单机版 Spark 镜像，解决第三方 Jar 包的依赖问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/enland_lan/article/details/103262946Docker Images: 构建单机版 Spark 镜像，解决第三方 Jar 包的依赖问题构建单机版 Sp…...
2024/4/23 2:41:45
JavaScript常用对象-----string
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/qq_43078424/article/details/103261537JavaScript常用对象-string 1.chartAt：返回指定位置的字符<script>var str …...
2024/3/29 11:17:28
vue学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/y13488733540/article/details/1032166391.框架和库的区别：框架：是一套完整的解决方案，对项目的侵入性较大，项目如果要…...
2024/4/23 4:23:18
Java-Servlet实现登录验证码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/qq_42737644/article/details/103262799在目前的网页的登录，注册中经常见到各种验证码。其目的是为了：防止暴力破解，因为…...
2024/4/20 18:19:08
Ubuntu 给Linux配置JDK
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/weixin_44714376/article/details/103262747Linux环境安装JDK: 一. 先创建文件夹: mkdir java cd java 二.下载JDK并解压:…...
2024/4/23 6:50:01
python + selenium自动化测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/lr936428775/article/details/103258562最近刚完成网站项目的自动化测试，来这里做个小结。前提条件：1 网站手工测试已经完…...
2024/4/23 23:41:32
SiI9136 -3 HDMI Transmitter 寄存器配置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/jx__0570/article/details/103029995Silicon Image HDMI发送器解决方案合并了独立的视频和音频流，以通过HDMI进行传输。为…...
2024/4/24 22:24:52
Vue.js详解（一）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/github_39106037/article/details/103262676Vue.js详解一、介绍 vue.js是什么Vue是一套渐进式框架。它只关注视图层，便于…...
2024/4/23 4:18:00
【3】设计模式-工厂模式
博客为个人学习笔记，不喜勿喷，谢谢！本文链接：https://blog.csdn.net/weixin_37645032/article/details/103262052定义一个创建对象的接口，让其子类自己决定实例化哪一个工厂类，工厂模式使其创建过程延迟到子类进行。优点：1、一个调用者想创建一个对…...
2024/4/24 14:24:44
IE 10+ CSS兼容
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/Xu_cipu/article/details/103262558CSS文件里添加 @media all and (-ms-high-contrast: none), (-ms-high-contrast: activ…...
2024/4/18 6:32:16

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

一、index.html

二、拼图.css

三、longbow.slidercaptcha.js

相关文章

最新文章