资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

html+jQuery如何实现拖动滑块图片拼图验证码插件

小编给大家分享一下html+jQuery如何实现拖动滑块图片拼图验证码插件，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联建站专注为客户提供全方位的互联网综合服务，包含不限于成都做网站、成都网站建设、石棉网络推广、成都小程序开发、石棉网络营销、石棉企业策划、石棉品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联建站为所有大学生创业者提供石棉建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

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

HTML & css：







拖动滑块图片拼图验证码插件










 
 
 
 
  请完成安全验证
 
 
      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);

jquery是什么

jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

以上是“html+jQuery如何实现拖动滑块图片拼图验证码插件”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


标题名称：html+jQuery如何实现拖动滑块图片拼图验证码插件
分享链接：http://cdkjz.cn/article/geioge.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
贵州义龙电信机房微信小程序开发雕琢时光东电技服攀枝花网站建设柔性防护网德昌麦琪建站成都网站排名做网站王君美油画

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图