精华内容
下载资源
问答
  • 滑动验证

    2019-11-12 08:49:25
    滑动验证有两种: 图片滑动验证 长方形的滑动条验证 一 : 图片滑动验证 效果演示 原始样式 没有正确验证的时候滑块会直接回到初始位置让你再次滑动验证 验证成功会给出提示 看代码之前**注意:**代码中要引入...

    拖动滑块进行验证码的验证。

    滑动验证有两种:

    1. 图片滑动验证
    2. 长方形的滑动条验证

    一 : 图片滑动验证

    效果演示

    原始样式
    在这里插入图片描述
    没有正确验证的时候滑块会直接回到初始位置让你再次滑动验证

    验证成功会给出提示
    在这里插入图片描述
    看代码之前**注意:**代码中要引入相应架包

    <script type="text/javascript" src="js/jquery.min.js"></script>
    	<script type="text/javascript" src="js/verify.js" ></script>
    

    代码演示

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    	<script type="text/javascript" src="js/jquery.min.js"></script>
    	<script type="text/javascript" src="js/verify.js" ></script>
    </head>
    
    <style>
    	/*滑动验证码*/
    	.verify-bar-area {
    	    position: relative;
    	    background: #FFFFFF;
    	   	text-align: center;
    	    -webkit-box-sizing: content-box;
    	    -moz-box-sizing: content-box;
    	    box-sizing: content-box;
    	   	border: 1px solid #ddd;
    	   	-webkit-border-radius: 4px;
    	}
    	 
    	.verify-bar-area .verify-move-block {
    	    position: absolute;
    	    top: 0px;
    	    left: 0;
    	    background: #fff;
    	    cursor: pointer;
    	    -webkit-box-sizing: content-box;
    	    -moz-box-sizing: content-box;
    	    box-sizing: content-box;
    	    box-shadow: 0 0 2px #888888;
    	    -webkit-border-radius: 1px;
    	}
    	
    
    	
    	.verify-img-panel {
    		margin:0;
    		-webkit-box-sizing: content-box;
    	    -moz-box-sizing: content-box;
    	    box-sizing: content-box;
    		border: 1px solid #ddd;
    		border-radius: 3px;
    		position: relative;
    	}
    	
    	.verify-img-panel .verify-refresh {
    		width: 25px;
    		height: 25px;
    		text-align:center;
    		padding: 5px;
    		cursor: pointer;
    		position: absolute;
    		top: 0;
    		right: 0;
    		z-index: 2;
    	}
    	
    	.verify-img-panel .icon-refresh {
    		font-size: 20px;
    		color: #fff;
    	}
    	
    	.verify-img-panel .verify-gap {
    		background-color: #fff;
    		position: relative;
    		z-index: 2;
    		border:1px solid #fff;
    	}
    	
    	.verify-bar-area .verify-move-block .verify-sub-block {
    		position: absolute;
    	    text-align: center;
    		z-index: 3;
    		border: 1px solid #fff;
    	}
    	
    	.verify-bar-area .verify-move-block .verify-icon {
    		font-size: 18px;
    	}
    	
    	.verify-bar-area .verify-msg {
    		z-index : 3;
    	}
    	
    </style>
    
    <body>
    
    <div id="mpanel4" style="margin-top:50px;">
    </div>
    </body>
    <script type="text/javascript">
    	
    	$('#mpanel4').slideVerify({
    		type : 2,		//类型
    		vOffset : 5,	//误差量,根据需求自行调整
    		vSpace : 5,	//间隔
    		imgName : ['1.jpg', '2.jpg'],
    		imgSize : {
    			width: '400px',
    			height: '200px',
    		},
    		blockSize : {
    			width: '40px',
    			height: '40px',
    		},
    		barSize : {
    			width : '400px',
    			height : '40px',
    		},
    		ready : function() {
    		},
    		success : function() {
    			alert('验证成功,添加你自己的代码!');
    			//......后续操作
    		},
    		error : function() {
    //		        	alert('验证失败!');
    		}
    		
    	});
    	
    </script>
    </html>
    

    关于图片的滑动验证已经结束,下面看一下关于滑动条验证的方式验证。

    二 : 滑动条验证

    效果演示

    原始样式
    在这里插入图片描述
    点击滑动
    在这里插入图片描述
    滑动完毕给出成功的提示
    在这里插入图片描述
    看代码之前**注意:**代码中要引入相应架包

    	<script type="text/javascript" src="js/jquery.min.js"></script>
    	<script type="text/javascript" src="js/verify.js" ></script>
    

    代码演示

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/verify.js" ></script>
    </head>
    <style>
    	/*滑动验证码*/
    	.verify-bar-area {
    	    position: relative;
    	    background: #FFFFFF;
    	   	text-align: center;
    	    -webkit-box-sizing: content-box;
    	    -moz-box-sizing: content-box;
    	    box-sizing: content-box;
    	   	border: 1px solid #ddd;
    	   	-webkit-border-radius: 4px;
    	}
    	 
    	.verify-bar-area .verify-move-block {
    	    position: absolute;
    	    top: 0px;
    	    left: 0;
    	    background: #fff;
    	    cursor: pointer;
    	    -webkit-box-sizing: content-box;
    	    -moz-box-sizing: content-box;
    	    box-sizing: content-box;
    	    box-shadow: 0 0 2px #888888;
    	    -webkit-border-radius: 1px;
    	}
    	
    	.verify-bar-area .verify-move-block:hover {
    	    background-color: #337ab7;
    	    color: #FFFFFF;
    	}
    	
    	.verify-bar-area .verify-left-bar {
    	    position: absolute;
    	    top: -1px;
    	    left: -1px;
    	   	background: #f0fff0;
    	    cursor: pointer;
    	    -webkit-box-sizing: content-box;
    	    -moz-box-sizing: content-box;
    	    box-sizing: content-box;
    	    border: 1px solid #ddd;
    	}	
    	
    </style>
    <body>
    
    <div id="mpanel1" >
    </div>
    
    
    <script type="text/javascript">
    
    	$('#mpanel1').slideVerify({
    		type : 1,		//类型
    		vOffset : 5,	//误差量,根据需求自行调整
    		barSize : {
    			width : '80%',
    			height : '40px',
    		},
    		ready : function() {
    		},
    		success : function() {
    			alert('验证成功,添加你自己的代码!');
    			//......后续操作
    		},
    		error : function() {
    //		        	alert('验证失败!');
    		}
    		
    	});
    	
    </script>
    </body>
    </html>
    
    展开全文
  • javascript 滑动验证 仿淘宝滑动验证

    千次阅读 2017-09-06 16:01:02
    javascript 滑动验证 仿淘宝滑动验证


    html:

    <div id="dragContainer">
                  <div id="dragBg"></div>
                  <div id="dragText"></div>
                  <div id="dragHandler" class="dragHandlerBg"></div>
                </div>
    css:

    背景 */
    #dragBg {
        position: absolute;
        background-color: #2f99fb;
        width: 0;
        height: 100%;
    }
    /* 滑动验证容器文本 */
    #dragText {
        position: absolute;
        width: 100%;
        height: 100%;
        /* 文字水平居中 */
        text-align: center;
        /* 文字垂直居中,这里不能用百分比,因为百分比是相对原始line-height的,而非div高度 */
        line-height: 42px;
        /* 文本不允许选中 */
        user-select: none;
        -webkit-user-select: none;
    }
    /* 滑块 */
    #dragHandler {
        position: absolute;
        width: 40px;
        height: 40px;
        cursor: move;
    }
    /* 滑块初始背景 */
    .dragHandlerBg {
        border: 1px solid #ddd;
        background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==");
    }
    /* 验证成功时的滑块背景 */
    .dragHandlerOkBg{
        border: 1px solid #2f99fb;
        background: #fff url("../images/toggle.png") no-repeat center;
    }

    javascript:

    window.onload = function() {
      var dragContainer = document.getElementById("dragContainer");
      var dragBg = document.getElementById("dragBg");
      var dragText = document.getElementById("dragText");
      var dragHandler = document.getElementById("dragHandler");
    
      //滑块最大偏移量
      var maxHandlerOffset = dragContainer.offsetLeft + dragContainer.offsetWidth - dragHandler.offsetWidth;
      //是否验证成功的标记
      var isVertifySucc = false;
      initDrag();
    
      function initDrag() {
        dragText.textContent = "拖动滑块验证";
        dragHandler.addEventListener("mousedown", onDragHandlerMouseDown);
      }
    
      function onDragHandlerMouseDown() {
        document.addEventListener("mousemove", onDragHandlerMouseMove);
        document.addEventListener("mouseup", onDragHandlerMouseUp);
      }
    
      function onDragHandlerMouseMove() {
        /*
        html元素不存在width属性,只有clientWidth
        offsetX是相对当前元素的,clientX和pageX是相对其父元素的
        */
        var left = event.clientX - dragHandler.clientWidth / 2;
        console.log(event.clientX);
        if(left < dragContainer.offsetLeft) {
          left = dragContainer.offsetLeft;
        } else if(left > maxHandlerOffset) {
          left = maxHandlerOffset;
          verifySucc();
        }
        dragHandler.style.left = left - dragContainer.offsetLeft + "px";
        dragBg.style.width = dragHandler.style.left;
      }
    
      function onDragHandlerMouseUp() {
        document.removeEventListener("mousemove", onDragHandlerMouseMove);
        document.removeEventListener("mouseup", onDragHandlerMouseUp);
        dragHandler.style.left = 0;
        dragBg.style.width = 0;
      }
    
      //验证成功
      function verifySucc() {
        isVertifySucc = true;
        dragText.textContent = "验证通过";
        dragText.style.color = "white";
        dragHandler.setAttribute("class", "dragHandlerOkBg");
        dragHandler.removeEventListener("mousedown", onDragHandlerMouseDown);
        document.removeEventListener("mousemove", onDragHandlerMouseMove);
        document.removeEventListener("mouseup", onDragHandlerMouseUp);
      }
    }
     

    实现样式:

     

     


    参考:http://blog.csdn.net/chy555chy/article/details/55294147




    展开全文
  • 滑动验证先放效果图滑块验证解锁.drag{width: 300px;height: 40px;line-height: 40px;background-color: #e8e8e8;position: relative;margin:0 auto;}.bg{width:40px;height: 100%;position: absolute;background-...

    滑动验证

    先放效果图

    滑块验证解锁

    .drag{

    width: 300px;

    height: 40px;

    line-height: 40px;

    background-color: #e8e8e8;

    position: relative;

    margin:0 auto;

    }

    .bg{

    width:40px;

    height: 100%;

    position: absolute;

    background-color: #75CDF9;

    }

    .text{

    position: absolute;

    width: 100%;

    height: 100%;

    text-align: center;

    user-select: none;

    }

    .btn{

    width:40px;

    height: 38px;

    position: absolute;

    border:1px solid #ccc;

    cursor: move;

    font-family: "宋体";

    text-align: center;

    background-color: #fff;

    user-select: none;

    color:#666;

    }

    请拖动滑块解锁
    >>

    //一、定义一个获取DOM元素的方法

    var $ = function(selector){

    return document.querySelector(selector);

    },

    box = $(".drag"),//容器

    bg = $(".bg"),//背景

    text = $(".text"),//文字

    btn = $(".btn"),//滑块

    success = false,//是否通过验证的标志

    distance = box.offsetWidth - btn.offsetWidth;//滑动成功的宽度(距离)

    //二、给滑块注册鼠标按下事件

    btn.onmousedown = function(e){

    //1.鼠标按下之前必须清除掉后面设置的过渡属性

    btn.style.transition = "";

    bg.style.transition ="";

    //说明:clientX 事件属性会返回当事件被触发时,鼠标指针向对于浏览器页面(或客户区)的水平坐标。

    //2.当滑块位于初始位置时,得到鼠标按下时的水平位置

    var e = e || window.event;

    var downX = e.clientX;

    //三、给文档注册鼠标移动事件

    document.onmousemove = function(e){

    var e = e || window.event;

    //1.获取鼠标移动后的水平位置

    var moveX = e.clientX;

    //2.得到鼠标水平位置的偏移量(鼠标移动时的位置 - 鼠标按下时的位置)

    var offsetX = moveX - downX;

    //3.在这里判断一下:鼠标水平移动的距离 与 滑动成功的距离 之间的关系

    if( offsetX > distance){

    offsetX = distance;//如果滑过了终点,就将它停留在终点位置

    }else if( offsetX < 0){

    offsetX = 0;//如果滑到了起点的左侧,就将它重置为起点位置

    }

    //4.根据鼠标移动的距离来动态设置滑块的偏移量和背景颜色的宽度

    btn.style.left = offsetX + "px";

    bg.style.width = offsetX + "px";

    //如果鼠标的水平移动距离 = 滑动成功的宽度

    if( offsetX == distance){

    //1.设置滑动成功后的样式

    text.innerHTML = "验证通过";

    text.style.color = "#fff";

    btn.innerHTML = "√";

    btn.style.color = "green";

    bg.style.backgroundColor = "lightgreen";

    //2.设置滑动成功后的状态

    success = true;

    //成功后,清除掉鼠标按下事件和移动事件(因为移动时并不会涉及到鼠标松开事件)

    btn.onmousedown = null;

    document.onmousemove = null;

    //3.成功解锁后的回调函数

    setTimeout(function(){

    alert('解锁成功!');

    },100);

    }

    }

    //四、给文档注册鼠标松开事件

    document.onmouseup = function(e){

    //如果鼠标松开时,滑到了终点,则验证通过

    if(success){

    return;

    }else{

    //反之,则将滑块复位(设置了1s的属性过渡效果)

    btn.style.left = 0;

    bg.style.width = 0;

    btn.style.transition = "left 1s ease";

    bg.style.transition = "width 1s ease";

    }

    //只要鼠标松开了,说明此时不需要拖动滑块了,那么就清除鼠标移动和松开事件。

    document.onmousemove = null;

    document.onmouseup = null;

    }

    }

    滑动图片验证

    先放效果图

    展开全文
  • 滑动验证

    2017-12-25 17:53:55
    滑动验证框jquerry,用户登录注册验证码。滑动验证,javascript脚本验证
  • 手动滑动验证.html

    2019-08-26 11:40:36
    手动滑动验证,手动滑动验证,手动滑动验证,手动滑动验证,手动滑动验证,手动滑动验证,手动滑动验证,手动滑动验证,手动滑动验证,手动滑动验证,手动滑动验证,手动滑动验证,手动滑动验证,手动滑动验证,手动...
  • vue实现手机短信验证、滑动验证,vue,等真实可靠,,
  • 相信大家都玩过B站,B站在登陆的...拖动滑动验证(无背景图片) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>拖动...

    相信大家都玩过B站,B站在登陆的时候有个拼图滑动验证,今天就整合一下前端实现的滑动验证

    拖动滑动验证(无背景图片)

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>拖动滑块验证</title>
    </head>
    <body>
      <meta charset="utf8">
        <style>
            /* 滑动控件容器,灰色背景 */
            #dragContainer {
                position: relative;
                display: inline-block;
                background: #e8e8e8;
                width: 300px;
                height: 33px;
                border: 2px solid #e8e8e8;
            }
            /* 滑块左边部分,绿色背景 */
            #dragBg {
                position: absolute;
                background-color: #7ac23c;
                width: 0px;
                height: 100%;
            }
            /* 滑动验证容器文本 */
            #dragText {
                position: absolute;
                width: 100%;
                height: 100%;
                /* 文字水平居中 */
                text-align: center;
                /* 文字垂直居中,这里不能用百分比,因为百分比是相对原始line-height的,而非div高度 */
                line-height: 33px;
                /* 文本不允许选中 */
                user-select: none;
                -webkit-user-select: none;
            }
            /* 滑块 */
            #dragHandler {
                position: absolute;
                width: 40px;
                height: 100%;
                cursor: move;
            }
            /* 滑块初始背景 */
            .dragHandlerBg {
                background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==");
            }
            /* 验证成功时的滑块背景 有√*/
            .dragHandlerOkBg {
                background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==");
            }
        </style>
        <script>
           //加载(事件会在页面加载完成后触发)
            window.onload = function() {
                //获取滑动控件容器,灰色背景
                var dragContainer = document.getElementById("dragContainer");
                //获取滑块左边部分,绿色背景
                var dragBg = document.getElementById("dragBg");
                //获取滑动验证容器文本
                var dragText = document.getElementById("dragText");
                //获取滑块
                var dragHandler = document.getElementById("dragHandler");
    
            </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">滑块的最大偏移量                 =     滑动验证容器文本长度                  -      滑块长度</span>
            <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> maxHandlerOffset </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> dragContainer.clientWidth </span><span style="background-color: #f5f5f5; color: #000000;">-</span><span style="background-color: #f5f5f5; color: #000000;"> dragHandler.clientWidth;
            </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">是否验证成功的标记</span>
            <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> isVertifySucc </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">false</span><span style="background-color: #f5f5f5; color: #000000;">;
            
            initDrag();
    
            </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> initDrag() {
                </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">在滑动验证容器文本写入“拖动滑块验证”</span>
    

    dragText.textContent = 拖动滑块验证;
    //给滑块添加鼠标按下监听
    dragHandler.addEventListener(mousedown, onDragHandlerMouseDown);
    }

           </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">选中滑块</span>
            <span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> onDragHandlerMouseDown() {
                </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">鼠标移动监听</span>
    

    document.addEventListener(mousemove, onDragHandlerMouseMove);
    //鼠标松开监听
    document.addEventListener(mouseup, onDragHandlerMouseUp);
    }

           </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">滑块移动</span>
            <span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> onDragHandlerMouseMove() {
                </span><span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">
                html元素不存在width属性,只有clientWidth
                offsetX是相对当前元素的,clientX和pageX是相对其父元素的
                </span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
               <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">滑块移动量</span>
                <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> left </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> event.clientX </span><span style="background-color: #f5f5f5; color: #000000;">-</span><span style="background-color: #f5f5f5; color: #000000;"> dragHandler.clientWidth </span><span style="background-color: #f5f5f5; color: #000000;">/</span> <span style="background-color: #f5f5f5; color: #000000;">2</span><span style="background-color: #f5f5f5; color: #000000;">;
                </span><span style="background-color: #f5f5f5; color: #008000;">//
    

    if(left < 0) {
    left
    = 0;
    //如果滑块移动量 > 滑块的最大偏移量 ,则调用验证成功函数
    } else if(left > maxHandlerOffset) {
    left
    = maxHandlerOffset;
    verifySucc();
    }
    //滑块移动量
    dragHandler.style.left = left + px;
    //绿色背景的长度
    dragBg.style.width = dragHandler.style.left;
    }

           </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">松开滑块函数</span>
            <span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> onDragHandlerMouseUp() {
                </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">移除鼠标移动监听</span>
    

    document.removeEventListener(mousemove, onDragHandlerMouseMove);
    //移除鼠标松开监听
    document.removeEventListener(mouseup, onDragHandlerMouseUp);
    //初始化滑块移动量
    dragHandler.style.left = 0;
    //初始化绿色背景
    dragBg.style.width = 0;
    }

            </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">验证成功</span>
            <span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> verifySucc() {
                </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">成功标记,不可回弹</span>
    

    isVertifySucc = false;
    //容器文本的文字改为白色“验证通过”字体
    dragText.textContent = 验证通过;
    dragText.style.color
    = white;
    //验证通过的滑块背景
    dragHandler.setAttribute(class, dragHandlerOkBg);
    //移除鼠标按下监听
    dragHandler.removeEventListener(mousedown, onDragHandlerMouseDown);
    //移除 鼠标移动监听
    document.removeEventListener(mousemove, onDragHandlerMouseMove);
    //移除鼠标松开监听
    document.removeEventListener(mouseup, onDragHandlerMouseUp);
    // 匹配成功以后写入你要跳转的页面
    window.location.href=成功页面.html;
    };
    }
    </script>
    </head>
    <body>
    <div id=“dragContainer”><!– 容器初始背景 –>
    <div id=“dragBg”></div><!– 绿色背景 –>
    <div id=“dragText”></div><!– 滑动容器文本 –>
    <div id=“dragHandler” class=“dragHandlerBg”></div>
    </div> <!– 滑块 滑块初始背景 –>
    </body>
    </html>

    效果图:

     

    图片滑动验证

     css

    .block {
      position: absolute;
      left: 0;
      top: 0;
    }
     
    .sliderContainer {
      position: relative;
      text-align: center;
      width: 310px;
      height: 40px;
      line-height: 40px;
      margin-top: 15px;
      background: #f7f9fa;
      color: #45494c;
      border: 1px solid #e4e7eb;
    }
     
    .sliderContainer_active .slider {
      height: 38px;
      top: -1px;
      border: 1px solid #1991FA;
    }
     
    .sliderContainer_active .sliderMask {
      height: 38px;
      border-width: 1px;
    }
     
    .sliderContainer_success .slider {
      height: 38px;
      top: -1px;
      border: 1px solid #52CCBA;
      background-color: #52CCBA !important;
    }
     
    .sliderContainer_success .sliderMask {
      height: 38px;
      border: 1px solid #52CCBA;
      background-color: #D2F4EF;
    }
     
    .sliderContainer_success .sliderIcon {
      background-position: 0 0 !important;
    }
     
    .sliderContainer_fail .slider {
      height: 38px;
      top: -1px;
      border: 1px solid #f57a7a;
      background-color: #f57a7a !important;
    }
     
    .sliderContainer_fail .sliderMask {
      height: 38px;
      border: 1px solid #f57a7a;
      background-color: #fce1e1;
    }
     
    .sliderContainer_fail .sliderIcon {
      top: 14px;
      background-position: 0 -82px !important;
    }
    .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;
    }
     
    .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;
    }
     
    .slider:hover {
      background: #1991FA;
    }
     
    .slider:hover .sliderIcon {
      background-position: 0 -13px;
    }
     
    .sliderIcon {
      position: absolute;
      top: 15px;
      left: 13px;
      width: 14px;
      height: 12px;
      background: url(http://cstaticdun.126.net//2.6.3/images/icon_light.f13cff3.png) 0 -26px;
      background-size: 34px 471px;
    }
     
    .refreshIcon {
      position: absolute;
      right: 0;
      top: 0;
      width: 34px;
      height: 34px;
      cursor: pointer;
      background: url(http://cstaticdun.126.net//2.6.3/images/icon_light.f13cff3.png) 0 -437px;
      background-size: 34px 471px;
    }

    js

    (function (window) {
      const l = 42, // 滑块边长
        r = 9, // 滑块半径
        w = 310, // canvas宽度
        h = 155, // canvas高度
        PI = Math.PI
      const L = l + r * 2 + 3 // 滑块实际边长
     
      function getRandomNumberByRange (start, end) {
        return Math.round(Math.random() * (end - start) + start)
      }
     
      function createCanvas (width, height) {
        const canvas = createElement('canvas')
        canvas.width = width
        canvas.height = height
        return canvas
      }
     
      function createImg (onload) {
        const img = createElement('img')
        img.crossOrigin = "Anonymous"
        img.onload = onload
        img.onerror = () => {
          img.src = getRandomImg()
        }
        img.src = getRandomImg()
        return img
      }
     
      function createElement (tagName, className) {
        const elment = document.createElement(tagName)
        elment.className = className
        return elment
      }
     
      function addClass (tag, className) {
        tag.classList.add(className)
      }
     
      function removeClass (tag, className) {
        tag.classList.remove(className)
      }
     
      function getRandomImg () {
        return 'https://picsum.photos/300/150/?image=' + getRandomNumberByRange(0, 1084)
      }
     
      function draw (ctx, x, y, operation) {
        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 = 'overlay'
      }
     
      function sum (x, y) {
        return x + y
      }
     
      function square (x) {
        return x * x
      }
     
      class jigsaw {
        constructor ({ el, onSuccess, onFail, onRefresh }) {
          el.style.position = el.style.position || 'relative'
          this.el = el
          this.onSuccess = onSuccess
          this.onFail = onFail
          this.onRefresh = onRefresh
        }
     
        init () {
          this.initDOM()
          this.initImg()
          this.bindEvents()
        }
     
        initDOM () {
          const canvas = createCanvas(w, h) // 画布
          const block = canvas.cloneNode(true) // 滑块
          const sliderContainer = createElement('div', 'sliderContainer')
          const refreshIcon = createElement('div', 'refreshIcon')
          const sliderMask = createElement('div', 'sliderMask')
          const slider = createElement('div', 'slider')
          const sliderIcon = createElement('span', 'sliderIcon')
          const text = createElement('span', 'sliderText')
     
          block.className = 'block'
          text.innerHTML = '向右滑动填充拼图'
     
          const el = this.el
          el.appendChild(canvas)
          el.appendChild(refreshIcon)
          el.appendChild(block)
          slider.appendChild(sliderIcon)
          sliderMask.appendChild(slider)
          sliderContainer.appendChild(sliderMask)
          sliderContainer.appendChild(text)
          el.appendChild(sliderContainer)
     
          Object.assign(this, {
            canvas,
            block,
            sliderContainer,
            refreshIcon,
            slider,
            sliderMask,
            sliderIcon,
            text,
            canvasCtx: canvas.getContext('2d'),
            blockCtx: block.getContext('2d')
          })
        }
     
        initImg () {
          const img = createImg(() => {
            this.draw()
            this.canvasCtx.drawImage(img, 0, 0, w, h)
            this.blockCtx.drawImage(img, 0, 0, w, h)
            const y = this.y - r * 2 - 1
            const ImageData = this.blockCtx.getImageData(this.x - 3, y, L, L)
            this.block.width = L
            this.blockCtx.putImageData(ImageData, 0, y)
          })
          this.img = img
        }
     
        draw () {
          // 随机创建滑块的位置
          this.x = getRandomNumberByRange(L + 10, w - (L + 10))
          this.y = getRandomNumberByRange(10 + r * 2, h - (L + 10))
          draw(this.canvasCtx, this.x, this.y, 'fill')
          draw(this.blockCtx, this.x, this.y, 'clip')
        }
     
        clean () {
          this.canvasCtx.clearRect(0, 0, w, h)
          this.blockCtx.clearRect(0, 0, w, h)
          this.block.width = w
        }
     
        bindEvents () {
          this.el.onselectstart = () => false
          this.refreshIcon.onclick = () => {
            this.reset()
            typeof this.onRefresh === 'function' && this.onRefresh()
          }
     
          let originX, originY, trail = [], isMouseDown = false
     
          const handleDragStart = function (e) {
            originX = e.clientX || e.touches[0].clientX
            originY = e.clientY || e.touches[0].clientY
            isMouseDown = true
          }
     
          const handleDragMove = (e) => {
            if (!isMouseDown) return false
            const eventX = e.clientX || e.touches[0].clientX
            const eventY = e.clientY || e.touches[0].clientY
            const moveX = eventX - originX
            const moveY = eventY - originY
            if (moveX < 0 || moveX + 38 >= w) return false
            this.slider.style.left = moveX + 'px'
            const blockLeft = (w - 40 - 20) / (w - 40) * moveX
            this.block.style.left = blockLeft + 'px'
     
            addClass(this.sliderContainer, 'sliderContainer_active')
            this.sliderMask.style.width = moveX + 'px'
            trail.push(moveY)
          }
     
          const handleDragEnd = (e) => {
            if (!isMouseDown) return false
            isMouseDown = false
            const eventX = e.clientX || e.changedTouches[0].clientX
            if (eventX == originX) return false
            removeClass(this.sliderContainer, 'sliderContainer_active')
            this.trail = trail
            const { spliced, verified } = this.verify()
            if (spliced) {
              if (verified) {
                addClass(this.sliderContainer, 'sliderContainer_success')
                typeof this.onSuccess === 'function' && this.onSuccess()
              } else {
                addClass(this.sliderContainer, 'sliderContainer_fail')
                this.text.innerHTML = '再试一次'
                this.reset()
              }
            } else {
              addClass(this.sliderContainer, 'sliderContainer_fail')
              typeof this.onFail === 'function' && this.onFail()
              setTimeout(() => {
                this.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)
        }
     
        verify () {
          const arr = this.trail // 拖动时y轴的移动距离
          const average = arr.reduce(sum) / arr.length
          const deviations = arr.map(x => x - average)
          const stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length)
          const left = parseInt(this.block.style.left)
          return {
            spliced: Math.abs(left - this.x) < 10,
            verified: stddev !== 0, // 简单验证下拖动轨迹,为零时表示Y轴上下没有波动,可能非人为操作
          }
        }
     
        reset () {
          this.sliderContainer.className = 'sliderContainer'
          this.slider.style.left = 0
          this.block.style.left = 0
          this.sliderMask.style.width = 0
          this.clean()
          this.img.src = getRandomImg()
        }
     
      }
     
      window.jigsaw = {
        init: function (opts) {
          return new jigsaw(opts).init()
        }
      }
    }(window))

     引用页面:

    <link rel="stylesheet" href="../css/hdyz.css">
    <script src="../js/myyz.js"></script>
    <div id="captcha"></div>
    <script type="text/javascript">
      jigsaw.init({
        el: document.getElementById('captcha'),
      })
    </script>

    效果图:

    展开全文
  • jQuery表单提交滑动验证实例是一款基于layui制作简单的表单输入框和拖动滑动验证代码。
  • 仿淘宝滑动验证

    2018-11-08 16:16:55
    仿淘宝滑动验证 [注意:本资源来自网络,如有侵权,请联系我删除,谢谢。]
  • java实现滑动验证解锁

    2020-08-18 17:58:16
    主要为大家详细介绍了java实现滑动验证解锁,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 使用JQuery制作的一个滑动验证插件,js自动生成HTML和设置CSS不需要引入其他文件,可以通过传参的方式修改滑块的CSS样式,可以传入滑动成功后再执行的方法。使用非常简单,一个页面可以生成多个滑动验证
  • 滑动验证实现

    2020-09-18 14:38:34
    滑动验证 效果示例图 实现原理 鼠标按下、移动、松开的之后,通过鼠标松开之后与初始位置的偏移量加上滑动块的宽度来计算滑动进度的div的宽度,在内层的滑动块始终向右浮动就行了。 鼠标移动过程中,越界...
  • js jquery 图片滑动 验证,使用很方便 ,大家可以看看哦,效果地址 https://blog.csdn.net/xxpxxpoo8/article/details/106015631
  • 主要介绍了java图片滑动验证(登录验证)原理与实现方法,结合实例形式详细分析了java图片滑动登录验证的相关原理、实现方法与操作技巧,需要的朋友可以参考下
  • 图片滑动验证

    2021-06-28 10:00:27
    图片验证方法可以理解为和轮播差不多的动画效果以及滑动事件 这些是滑动验证以及图片切换的方法和效果,以及图片验证的过程 css代码如下
  • 主要介绍了vue 登录滑动验证实现代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 写东西的时候用到了,移动/pc端登录滑动验证。刚好发个demo,可直接使用。以后啥时候用到了,可以过来再下载。有点小方便
  • 下面小编就为大家分享一篇js登录滑动验证的实现(不滑动无法登陆),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 滑动验证,支持H5和PC网页
  • 滑动验证 先放效果图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滑块验证解锁</title> <style> .drag{ width: 300px;...
  • vue项目拼图滑动验证组件,经过处理兼容IE及各个浏览器,图片需要自己上传,链接https://blog.csdn.net/Hei_lovely_cat/article/details/106214695
  • 基于C#编写的滑动验证码,包含机器滑动验证,后台校验。入库操作。
  • 图片滑动验证.zip

    2020-08-24 17:28:12
    javascript图片滑动验证,以ssm项目举例。用于登录或者其他点击按钮的验证,防止恶意点击,资源文件都已打包好,直接以静态资源文件引入即可使用。该功能主要以js的验证,涉及的java代码很少。
  • Vue 滑动验证

    2019-11-10 21:39:10
    用Vue实现滑动验证码,鼠标点击滑动验证,验证成功之后会显示验证通过。 程序分析 鼠标的点击 滑块的拖动 未验证之前滑动条上显示的文字 滑块箭头指向Vue函数 判断是否拖动完毕 拖动完毕时改变背景色并显示验证成功...
  • 滑动验证插件

    2020-04-08 17:49:56
    滑动验证插件 原文地址:https://blog.csdn.net/lidysun/article/details/90674118
  • 本篇文章主要介绍了Android自定义滑动验证条的示例代码,具有一定的参考价值,有兴趣的可以了解一下
  • 主要为大家详细介绍了vue简单的一拉到底的滑动验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了Android控件SeekBar仿淘宝滑动验证效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,405
精华内容 16,962
关键字:

滑动验证