js实现滑动拼图验证码

转载地址：https://www.cnblogs.com/huaji666/p/8257710.html

js实现滑动拼图验证码，我这个样式是仿那些大网站做了，学习用的,只用到前端。小的个人网站感觉还可以用，大一点的别人用机器一下就破解了。

下面看图示:

样子大概是这样的。

源码在这

百度网盘: 链接: https://pan.baidu.com/s/1htjxYBE 密码: m5aw

3.9MB 是因为里面绝大部分是图片

使用示例代码里面都有

js源码

(function (window, document) {var SliderBar = function (targetDom, options) {// 判断是用函数创建的还是用new创建的。这样我们就可以通过MaskShare("dom") 或 new MaskShare("dom")来使用这个插件了  if (!(this instanceof SliderBar)) return new SliderBar(targetDom, options);// 参数this.options = this.extend({dataList: []}, options);// 获取domthis.targetDom = document.getElementById(targetDom);var dataList = this.options.dataList;if (dataList.length > 0) {var html = "<div class='slide-box'><div class='slide-img-block'>" +"<div class='slide-loading'></div><div class='slide-img-border'>" +"<div class='scroll-background slide-top'></div><div class='slide-img-div'>" +"<div class='slide-img-nopadding'><img class='slide-img' id='slideImg' src='' />" +"<div class='slide-block' id='slideBlock'></div><div class='slide-box-shadow' id='cutBlock'></div></div>" +"<div class='scroll-background  slide-img-hint-info' id='slideHintInfo'>" +"<div class='slide-img-hint'><div class='scroll-background slide-icon' id='slideIcon'></div>" +"<div class='slide-text'><span class='slide-text-type' id='slideType'></span>" +"<span class='slide-text-content' id='slideContent'></span></div></div></div></div>" +"<div class='scroll-background slide-bottom'>" +"<div class='scroll-background slide-bottom-refresh' id='refreshBtn' title='更换图片'></div>" +"<div class='slide-bottom-no-logo'></div></div></div></div>" +"<div class='scroll-background scroll-bar'>" +"<div class='scroll-background slide-btn' id='slideBtn'></div>" +"<div class='slide-title' id='slideHint'> <-按住滑块，拖动完成上面拼图</div></div></div>";this.targetDom.innerHTML = html;this.slideBtn = document.getElementById("slideBtn");                 // 拖拽按钮this.refreshBtn = document.getElementById("refreshBtn");             // 换图按钮this.slideHint = document.getElementById("slideHint");               // 提示名称this.slideImg = document.getElementById("slideImg");                 // 图片this.cutBlock = document.getElementById("cutBlock");                 // 裁剪区域this.slideBlock = document.getElementById("slideBlock");             // 裁剪的图片this.slideIcon = document.getElementById("slideIcon");               // 正确、失败的图标this.slideType = document.getElementById("slideType");               // 正确、失败this.slideContent = document.getElementById("slideContent");         // 正确、失败的正文this.slideHintInfo = document.getElementById("slideHintInfo");       // 弹出this.resultX = 0;this.startX = 0;this.timer = 0;this.startTamp = 0;this.endTamp = 0;this.x = 0;this.imgWidth = 0;this.imgHeight = 0;this.imgList = [];this.isSuccess = true;for (var i = 1; i < 10; i++) {this.imgList.push(i + ".jpg");}}this.init();}SliderBar.prototype = {init: function () {this.event();},extend: function (obj, obj2) {for (var k in obj2) {obj[k] = obj2[k];}return obj;},event: function () {var _this = this;_this.reToNewImg();_this.slideBtn.onmousedown = function(event){_this.mousedown(_this, event);} _this.refreshBtn.onclick = function(){_this.refreshBtnClick(_this);}},refreshBtnClick: function(_this){_this.isSuccess = true;_this.slideBlock.style.cssText = "";_this.cutBlock.style.cssText = "";_this.reToNewImg();},reToNewImg: function () {var _this = this;var index = Math.round(Math.random() * 8);         // 该方法有等于0 的情况var imgSrc = "./images/" + _this.imgList[index] + "";_this.slideImg.setAttribute("src", imgSrc);_this.slideBlock.style.backgroundImage = "url("+ imgSrc +")";_this.slideImg.onload = function (e) {e.stopPropagation();_this.imgWidth = _this.slideImg.offsetWidth;                   // 图片宽_this.imgHeight = _this.slideImg.offsetHeight;                 // 图片高}},cutImg: function () {var _this = this;_this.cutBlock.style.display = "block";var cutWidth = _this.cutBlock.offsetWidth;                // 裁剪区域宽var cutHeight = _this.cutBlock.offsetHeight;              // 裁剪区域高// left _this.resultX = Math.floor(Math.random() * (_this.imgWidth - cutWidth * 2 - 4) + cutWidth);// topvar cutTop = Math.floor(Math.random() * (_this.imgHeight - cutHeight * 2) + cutHeight);// 设置样式_this.cutBlock.style.cssText = "top:" + cutTop + "px;" + "left:" + _this.resultX + "px; display: block;";_this.slideBlock.style.top = cutTop + "px";_this.slideBlock.style.backgroundPosition = "-" + _this.resultX + "px -" + cutTop + "px";_this.slideBlock.style.opacity = "1";},mousedown: function (_this, e) {e.preventDefault();_this.startX = e.clientX;_this.startTamp = (new Date()).valueOf();var target = e.target;target.style.backgroundPosition = "0 -216px";_this.slideHint.style.opacity = "0";if(_this.isSuccess){_this.cutImg();}document.addEventListener('mousemove', mousemove);document.addEventListener('mouseup', mouseup);// 拖拽function mousemove(event) {_this.x = event.clientX - _this.startX;if (_this.x < 0) {_this.slideBtn.style.left = "0px";_this.slideBlock.style.left = "2px";} else if (_this.x >= 0 && _this.x <= 217) {_this.slideBtn.style.left = _this.x + "px";_this.slideBlock.style.left = _this.x + "px";} else {_this.slideBtn.style.left = "217px";_this.slideBlock.style.left = "217px";}_this.slideBtn.style.transition = "none";_this.slideBlock.style.transition = "none";};// 鼠标放开function mouseup() {document.removeEventListener('mousemove', mousemove);document.removeEventListener('mouseup', mouseup);var left = _this.slideBlock.style.left;left = parseInt(left.substring(0, left.length-2));if(_this.resultX > (left - 2) && _this.resultX < (left + 2)){_this.isSuccess = true;_this.endTamp = (new Date()).valueOf();_this.timer = ((_this.endTamp - _this.startTamp) / 1000).toFixed(1);// 裁剪图片(拼图的一块)_this.slideBlock.style.opacity = "0";_this.slideBlock.style.transition = "opacity 0.6s";// 裁剪的区域(黑黑的那一块)_this.cutBlock.style.opacity = "0";_this.cutBlock.style.transition = "opacity 0.6s";// 正确弹出的图标_this.slideIcon.style.backgroundPosition = "0 -1207px";_this.slideType.className = "slide-text-type greenColor";_this.slideType.innerHTML = "验证通过:";_this.slideContent.innerHTML = "用时" + _this.timer + "s";setTimeout(function(){_this.cutBlock.style.display = "none";_this.slideBlock.style.left = "2px";_this.reToNewImg();}, 600);_this.options.success&&_this.options.success();}else{_this.isSuccess = false;// 设置样式// 裁剪图片(拼图的一块)_this.slideBlock.style.left = "2px";_this.slideBlock.style.transition = "left 0.6s";// 错误弹出的图标_this.slideIcon.style.backgroundPosition = "0 -1229px";_this.slideType.className = "slide-text-type redColor";_this.slideType.innerHTML = "验证失败:";_this.slideContent.innerHTML = "拖动滑块将悬浮图像正确拼合";_this.options.fail&&_this.options.fail();}// 设置样式_this.slideHintInfo.style.height = "22px";setTimeout(function(){_this.slideHintInfo.style.height = "0px";}, 1300);_this.slideBtn.style.backgroundPosition = "0 -84px";_this.slideBtn.style.left = "0";_this.slideBtn.style.transition = "left 0.6s";_this.slideHint.style.opacity = "1";}}}window.SliderBar = SliderBar;
}(window, document));

css就不放了

别人的有像拼图一样的凹凸，那个我实在不知道怎么弄就算了。

js实现滑动拼图验证码相关推荐

js php滑动拼图解锁,js 滑动拼图验证码
以前的验证码很简单,就是一个带些背景色或背景图和干扰线的纯数字字母类的验证码,现在已经发展变得很丰富了.我见过的就有好几种:纯字母数字类,数学计算类,依次点击图片上的文字类,从下列图片列表里选取符合描 ...
php滑动拼图验证,JS怎么实现滑动拼图验证码
这次给大家带来JS怎么实现滑动拼图验证码,JS实现滑动拼图验证码的注意事项有哪些,下面就是实战案例,一起来看一下. 上图为网易云盾的滑动拼图验证码,其应该有一个专门的图片库,裁剪的位置是固定的.我的想 ...
php滑动拼图验证,JS实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo ...
手机HTML拼图验证,JS实现PC手机端和嵌入式滑动拼图验证码三种效果_气质_前端开发者...
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo ...
爬虫之极验验证码破解-滑动拼图验证码破解
滑动拼图验证码破解前言步骤分析第一步,获取原图第二步拼接图片第三步计算豁口所在位置第四步计算拖动距离模拟拖动其他前言滑动验证码已经流行很多年了,我们在这里尝试一下如何实现滑动 ...
滑动拼图验证码免费 java_js+canvas实现滑动拼图验证码功能
上图为网易云盾的滑动拼图验证码,其应该有一个专门的图片库,裁剪的位置是固定的.我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图.下面介绍具体步骤. 首先随便找一张图片渲染到c ...
滑动拼图验证码操作步骤：_拼图项目：一个不完整的难题
滑动拼图验证码操作步骤: 马克·雷因霍尔德(Mark Reinhold)最近提议延迟Java 9,以花更多的时间完成项目Jigsaw,这是即将发布的版本的主要功能. 虽然这个决定肯定会使Java的厄运 ...
滑动拼图验证码操作步骤：_拼图项目：延期的后果
滑动拼图验证码操作步骤: Mark Reinhold先生于2012年7月宣布 ,他们计划从Java 8撤消Jigsaw项目 ,因为Jigsaw计划于2013年9月(从现在开始一年)推迟其发布. 这个日 ...
uniapp、vue实现滑动拼图验证码
实际开发工作中,在登陆的时候需要短信验证码,但容易引起爬虫行为,需要用到反爬虫验证码,今天介绍一下拼图验证码,解决验证码反爬虫中的滑动验证码反爬虫. 原理滑动拼图验证码是在滑块验证码的基础上增加了一 ...
Android 滑动拼图验证码控件
Android 滑动拼图验证码控件简介: 很多软件为了安全防止恶意攻击,会在登录/注册时进行人机验证,常见的人机验证方式有:谷歌点击复选框进行验证,输入验证码验证,短信验证码,语音验证,文字按顺序选 ...

js实现滑动拼图验证码

js实现滑动拼图验证码相关推荐

最新文章

热门文章