JS完成滑动拼图验证功能

最新推荐文章于 2022-05-25 22:01:39 发布
最新推荐文章于 2022-05-25 22:01:39 发布
阅读量1.7k 收藏
点赞数
文章标签： js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/talent1223/article/details/106327436
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>      
    <title>滑块验证</title>    
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<!-- 解决在h5页面中ie兼容模式页面显示异常 -->
	<meta http-equiv="X-UA-Compatible"content="IE=9; IE=8; IE=7; IE=EDGE">	  	
  </head>  
  <style type="text/css">
  .slide-box{
    display: block;
    position: relative;
}
.slide-img-block{
	display:none;
	position: absolute;
    top: -124px;
    left: 0;
    right: 0;
}
.slide-box:hover .slide-img-block{display:block;} 

.scroll-background{
    background-image: url("./images/images/sprite.3.2.0.png");
    background-repeat: no-repeat;
}
.scroll-bar{
	width: 400px;
    height: 38px;
    position: relative;
    margin: 0 0 10px 0;
    border: 1px solid #e4e7eb;
    background: #f7f9fa;
    /* border-radius: 18px; */
}
.slide-btn{
    height: 44px;
    width: 44px;
    background-position: 0 -84px;
    cursor: pointer;
    display: block;
    position: absolute;
    left: -4px;
    top: -3px;
    -moz-box-shadow: none;
    box-shadow: none;
    border-radius: 13px;
    z-index: 399;
}
.slide-title{
    cursor: default;
    font-size: 14px;
    color: #486c80;
    opacity: 1;
    filter: alpha(opacity=100);
    line-height: 39px;
    text-align: center;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.slide-img-div{
	width: 400px;
    height: 300px;
    position: relative;
    border: 1px solid #eaeaea;
}
.slide-img-div img{
    width: 100%;
    height: 100%;
}
.slide-bottom-refresh{
    cursor: pointer;
    background: url("./images/images/refreshBtn.png") no-repeat center top;
    background-size: 100%;
    height: 34px;
    width: 34px;
    position: absolute;
    top: 0;
    right: 0;
}
.slide-bottom-refresh:hover{background:url("./images/images/refreshBtn2.png") no-repeat center top;background-size: 100%;}

.slide-box-shadow{
    display: none;
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5) inset;
}
.slide-block{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 2px;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background-repeat: no-repeat;
    background-attachment: scroll;
    border: 1px solid rgba(255, 255, 0, 0.8);
    background-size: 400px 300px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4), 0 0 10px 0 rgba(90, 90, 90, 0.4);
    box-sizing: border-box;
    z-index: 10;
}
.slide-img-nopadding{
    position: relative;
    width: 100%;
    height: 100%;    
}
.slide-icon{
    float: left;
    height: 22px;
    width: 26px;
}
.slide-img-hint{
    -webkit-font-smoothing: subpixel-antialiased;
    font-size: 12px !important;
    line-height: 22px !important;
    margin: 0 auto;
    position: relative;
}
.slide-text{
    text-align: left !important;
    color: #4b3f33;
}
.slide-img-hint-info{
    height: 22px;
    width: 100%;
    background:#ddf4fd;
    height: 0;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    transition: height 0.3s;
    z-index: 11;
}
.redColor{
    color: red;
}
.greenColor{
    color: green;
}
 .black_overlay{ 
            display: none; 
            position: absolute; 
            top: 0%; 
            left: 0%; 
            width: 100%; 
            height: 100%; 
            background-color: black; 
            z-index:1001; 
            -moz-opacity: 0.8; 
            opacity:.80; 
            filter: alpha(opacity=88); 
        } 
        .white_content { 
            display: none; 
            position: absolute; 
            top: 20%; 
            left: 20%; 
            width: 50%; 
            height: 50%; 
            padding: 20px; 
            border: 0px solid white; 
            /* background-color: white;  */
            
            z-index:1002; 
            overflow: auto; 
        } 
       

  </style>
 <script type="text/javascript" src="/jsoa/ui/js/jquery-1.11.1.min.js"></script>
  <script type="text/javascript">
  (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);
        // 获取dom
        this.targetDom = document.getElementById(targetDom);
        var dataList = this.options.dataList;
        if (dataList.length > 0) {
            var html = "<div class='slide-box'>" +
                "<div class='slide-loading'></div><div class='slide-img-border'>" +
                "<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-bottom-refresh' id='refreshBtn' title='更换图片'></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></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/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;              // 裁剪区域高
            if(_this.imgWidth == 0){
            	_this.imgWidth =  Math.floor((Math.random()*100)+200);
            }
            if(_this.imgHeight == 0){
            	_this.imgHeight = Math.floor((Math.random()*100)+25);
            }
            // left 
            _this.resultX = Math.floor(Math.random() * (_this.imgWidth - cutWidth * 2 - 4) + cutWidth);
            // top
            var 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 = "-4px";
                    _this.slideBlock.style.left = "2px";
                } else if (_this.x >= 0 && _this.x <= 360) {
                    _this.slideBtn.style.left = _this.x + "px";
                    _this.slideBlock.style.left = _this.x + "px";
                } else {
                    _this.slideBtn.style.left = "360px";
                    _this.slideBlock.style.left = "360px";
                }
                _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);
                    //如果成功合上的时间不在规则内
                    if( _this.timer < 0.5 || _this.timer >10){
                    	 _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();
                    } else {
                        // 裁剪图片(拼图的一块)
                        _this.slideBlock.style.opacity = "0";
                        _this.slideBlock.style.transition = "opacity 0.6s";
                        // 裁剪的区域(黑黑的那一块)
                        _this.cutBlock.style.opacity = "0";
                        _this.cutBlock.style.left = "2px";
                        _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.cutBlock.style.opacity = "0";
                    _this.cutBlock.style.left = "2px";
                    _this.cutBlock.style.transition = "opacity 0.6s";
                    // 错误弹出的图标
                    _this.slideIcon.style.backgroundPosition = "0 -1229px";
                    _this.slideType.className = "slide-text-type redColor";
                    _this.slideType.innerHTML = "验证失败:";
                    _this.slideContent.innerHTML = "拖动滑块将悬浮图像正确拼合";
                    setTimeout(function(){
                        _this.cutBlock.style.display = "block";
                        _this.slideBlock.style.left = "2px";
                        _this.reToNewImg();
                        _this.cutImg();
                    }, 600);
                    _this.options.fail&&_this.options.fail();
                }
                // 设置样式
                _this.slideHintInfo.style.height = "22px";
                setTimeout(function(){
                    _this.slideHintInfo.style.height = "0px";
                }, 2000);
                _this.slideBtn.style.backgroundPosition = "0 -84px";
                _this.slideBtn.style.left = "-4px";
                _this.slideBtn.style.transition = "left 0.6s";
                _this.slideHint.style.opacity = "1";
            }
        }
    }
    window.SliderBar = SliderBar;
}(window, document));

  </script>
  
  <body>

         <div id="slideBar" ></div>
    </body> 


  
    <script type="text/javascript">
    /**
	 * 关闭弹框
	 */
	
$(function(){
	 //滑块  
		var dataList = ["0","1"];
        var options = {
            dataList: dataList,
            success:function(){  
            
	          console.log(options);
	          two();
            },
            fail: function(){
                return;
            }
        };
        SliderBar("slideBar", options);
	});
	  
	
        <%-- var dataList = ["0","1"];
        var options = {
            dataList: dataList,
            success:function(){  
                console.log("show");
    			/* closeLayer(); */
    			/* window.close(); */
    			two();
                window.opener.location.href="/jsoa/retrievePassword.jsp?cid="+<%=msg%>;
                 window.location.href="/jsoa/retrievePassword.jsp?cid="+<%=msg%>;  
                 
            },
            fail: function(){
                console.log("fail");  
            }
        };
        SliderBar("slideBar", options); --%>
    </script>
  </body>
</html>
TalentDebug
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
滑动拼图验证码（canvas实现，可在html，vue中直接）
DT_11的博客
03-15 626
滑动拼图验证码
vue_elementui拖住滑块拼图验证代码
weixin_38373875的博客
07-12 4117
vue拖住滑块拼图验证，以下是cavas直接写的滑块拼图验证码，直接复制即可使用 转载请注明本宝宝，谢谢 <template> <div id="puzzle" ref="puzzle" style="display:inline-block;"> <!-- :style="'padding:' + 16*scale + 'px ' + 16*scale +...
纯前端滑块拼图验证组件（多端兼容）
qq_38734862的博客
12-04 917
因为没有使用dom节点，所以在uniapp上也是可以使用的，图片src对应修改下就能用了 **注意：**这个验证组件是纯前端组件，安全性较低，可以供学习使用，不建议项目中使用！！ 效果图 源代码 <template> <view class="independent" v-if="show"> <view v-if="refreshStatus" class="shuaxin iu-icon-refresh" :style="{ transfor
vue项目图片滑动验证码 前端+后端验证
月来better
05-25 3650
之前项目登录时填写的是验证码,后来说要与时俱进,改成滑动图片的方式 这里的背景图和滑块是由后台返回的,前端传回移动距离给后端验证,这里我只写前端处理的部分的(毕竟后端的也不懂) 项目源代码:githup地址https://github.com/shengbid/vue-demo/tree/master/src/views/login 这个项目是最近在整理之前写的博客的一些案例的代码,里面还有一些其他的功能,后续也会继续完善,有需要可以下载来看下,有帮助的话记得star哦 写成一个组件, captha.v
滑块验证码
12-17
先大概梳理一下这个特征，点击验证，弹出这个滑块验证码，用鼠标拖动到缺口阴影位置松手即可实现验证。 逻辑比较简单，目前要处理的核心问题就是怎么找到这个阴影位置，因为可能有不同的图片而且图片中缺口阴影的位置也不确定。 问题可以简化为：如何找到背景图中缺口的准确位置
JS实现滑动拼图验证功能完整示例
10-15
JavaScript滑动拼图验证是一种常见的...通过以上步骤，你可以构建一个完整的JavaScript滑动拼图验证功能，它不仅提供了基本的安全防护，还为用户带来了良好的交互体验。在实际应用中，可以根据项目需求进行定制和优化。
js实现html滑动图片拼图验证
10-15
主要为大家详细介绍了js实现html滑动图片拼图验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
滑动拼图验证插件
06-01
jQuery滑动拼图验证插件，支持移动、PC
滑动拼图验证插件SliderImgPuzzle
06-01
仿造网络上的类似的拼图控件
纯JS打造的滑块拼图验证
06-14
良心制作，只为分享，下载了某人的资源，还很高分，结果不是缺这个就是缺那个，不能用，浪费了好多分，鄙视。此资源为纯JS制作，本人已经根据自己项目实际进行了改动，您下载之后，请根据自己项目需求自行调整
滑动图片验证码
09-27
jquery写的滑块验证码 ，兼容IE浏览器,可以直接在项目中套用
滑动拼图解锁
热门推荐
Koow的博客
01-18 1万+
突发奇想把六位验证码登录换成滑动，后又想要加拼图解锁，苦于js技术与css技术实在是差，于是在网上找到了这个 网易云盾：点击打开链接 注册后登陆，找到下面我的产品，创建一个免费的验证码产品 然后点击创建产品操作栏的查看详情 jsp页面代码如下： 易盾验证码-DEMO
js实现滑动条的简单验证
光头强的博客
07-11 9865
效果图： 一般很多网站都有滑动条的验证，我是从站长素材上下载的。 给大家一个下载网址：http://sc.chinaz.com/jiaoben/160330568920.htm 下载好后解压压缩包： 找到drag.js文件： 注意上方的两张效果图，有没有发现拖动前和拖动后的字都不一样，拖动前的字是：拖动滑块验证。拖动后的字是：验证通过。给它设置一个id，名为haha,目的就是来接...
滑动验证操作实现
晒太阳的猫
06-21 4141
最近项目需要用到滑动登陆，所以上网找了类似滑动按钮的样式代码做了修改，改为需滑动到指定的范围才能登陆。滑动登陆的范围为后端返回的区间，需要传入给后端最大的区间值。下面是代码：    CSS:.common { position: absolute; left: 0; top: 0; border-radius: 3px; } .slide-to-unlock-bg { text...
java实现动态验证码源代码——jsp页面
weixin_34348111的博客
05-04 577
我们通常在其他网站注册或者登陆的时候会发现一个很高大上的验证码，那么怎么用java代码实现呢？下面我给大家贴一下我写的方法： 此文章是写的前台jsp页面的代码： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getCont...
JavaScript---实现滑动拼图验证效果完整代码
最爱松露巧克力
03-26 4466
上图为网易云盾的滑动拼图验证码，其应该有一个专门的图片库，裁剪的位置是固定的。我的想法是，随机生成图片，随机生成位置，再用canvas裁剪出滑块和背景图。下面介绍具体步骤。 首先随便找一张图片渲染到canvas上，这里#canvas作为画布，#block作为裁剪出来的小滑块。 1 2 3 4 5 6 7 8 9 ...
java实现滑动块验证码_java滑动拼图验证码教程
weixin_39654245的博客
02-19 388
通过原图，在随机位置生成小方格，并根据小方格生成底图，底图由小方格的灰度化之后，绘制到原图上。private Map createImg(File file, String filename) throws IOException {BufferedImage sourceBuff = ImageIO.read(file);int width = sourceBuff.getWidth();int...
滑块拖动验证
MJ的博客
02-12 1万+
一、HTML               Success! 二、CSS body {     background:#006b9d; } #verify{     width:508px;     height:523px;     background:url(bg.png);     margin:50px auto;     position:relativ
java实现滑动验证码_java滑动拼图验证码教程
weixin_39911056的博客
02-16 810
生成Shape区域之后，根据小方格Shape区域，根据原图创建出方格，根据凹槽Shape创建一个灰化的凹槽区域。对小方格进行边缘亮化、阴影处理。 在处理阴影时，需要注意：因为阴影生成在Shape外部，我们还需要使用一个图层用来绘制阴影。然后将小方格绘制到这个图层上//处理小图的边缘灯光及其阴影效果private BufferedImage dealLightAndShadow(BufferedIm...
js实现滑动拼图验证功能完整示例
最新发布
01-16
滑动拼图验证功能是一种常见的网站人机验证方法，旨在防止恶意机器人或自动化程序对网站进行恶意攻击。下面是一个使用JavaScript实现滑动拼图验证码的完整示例: ``` <!DOCTYPE html> 滑动拼图验证 /* 拼图...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值