JavaScript实现滑块验证解锁
本文实例为大家分享了JavaScript实现滑块验证解锁的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// 引入矢量图标库
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2248239_eso2z5bskxk.css">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #e8e8e8;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
position: relative;
margin-top: 100px;
margin-left: 200px;
}
.box .bgColor {
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
}
.box .tips {
position: absolute;
width: 100%;
height: 40px;
line-height: 40px;
font-size: 14px;
color: #000;
text-align: center;
user-select: none;
}
.ball {
width: 50px;
height: 38px;
border: 1px solid #ccc;
background: #fff;
text-align: center;
cursor: move;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="bgColor"></div>
<div class="tips">滑动验证</div>
<div class="ball"><i class="iconfont icon-double-arro-right"></i></div>
</div>
</body>
<script>
var box = document.getElementsByClassName("box")[0];
var ball = document.getElementsByClassName("ball")[0];
var bgColor = document.getElementsByClassName("bgColor")[0];
var tips = document.getElementsByClassName("tips")[0];
// 设置成功状态
var isSuccess = false; //默认为false 不成功
ball.onmousedown = function(e) {
var e = e || window.event;
// 获取鼠标相对于事件源左上角的位置
var posx = e.offsetX;
// 每次鼠标按下时 清除动画样式
ball.style.transition = "";
bgColor.style.transition = "";
document.onmousemove = function(e) {
var e = e || window.event;
var x = e.pageX - box.offsetLeft - posx;
var max = box.clientWidth - ball.clientWidth;
if (x <= 0) {
x = 0;
}
if (x >= max) {
x = max;
}
bgColor.style.width = x + "px";
ball.style.left = x + "px";
bgColor.style.backgroundColor = "#6ff";
if (x == max) {
success();
}
}
document.onmouseup = function() {
// 如果没有解锁成功则返回原点
if (!isSuccess) {
bgColor.style.width = 0 + "px";
ball.style.left = 0 + "px";
ball.style.transition = "left 0.6s linear";
bgColor.style.transition = "width 0.6s linear";
}
// 鼠标抬起时,移除鼠标移动事件和鼠标抬起事件
document.onmouseup = null;
document.onmousemove = null;
}
}
// 定义一个滑块解锁成功的方法
function success() {
isSuccess = true;
// 获取图标
var icon = ball.firstElementChild;
tips.textContent = "解锁成功";
bgColor.style.backgroundColor = "lightgreen";
icon.className = "iconfont icon-gou";
icon.style.color = "lightgreen";
//滑动成功时，移除鼠标按下事件
ball.onmousedown = null;
}
</script>
</html>
效果图如下:
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript实现登录滑块验证
本文实例为大家分享了JavaScript实现登录滑块验证的具体代码,供大家参考,具体内容如下 html代码 <div class="login-select"> <div v-show="errselectFlag" id="err-select"></div> <p id="title-p">按住滑块,拖拽验证</p> <div id="left-s
-
js实现滑动滑块验证登录
本文实例为大家分享了js实现滑动滑块验证登录的具体代码,供大家参考,具体内容如下 1.html代码 <div class="box"> <!--滑块--> <a href="#" rel="external nofollow" ><div class="btn">>></div></a> <!--文字--> <p class=
-
基于JS组件实现拖动滑块验证功能(代码分享)
拖动滑块验证功能在支付宝,微信各大平台都能见到这样的功能,那么基于js组件是如何实现此功能的呢?今天小编就给大家分享下js 拖动滑块 验证功能的实现代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Cache-Control" content="no-cache, no-store, m
-
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
vue验证滑块功能,在生活中很多地方都可以见到,那么使用起来非常方便,基于vue如何实现滑块验证呢?下面通过代码给大家讲解. 效果图如下所示: 拖动前 拖动后 代码引用的css与js都是线上的 将代码全部复制到一个html中可以直接打开,极其简单. 来分析一下代码 底色div上放了一个变色div再放一个提示字的div最后加一个滑块div 给滑块div绑定鼠标移动事件 <!DOCTYPE html> <html> <head> <meta charset="
-
JavaScript实现滑块验证码
本文实例为大家分享了JavaScript实现滑块验证码的具体代码,供大家参考,具体内容如下 效果:鼠标在底部滑块上按下按住不松拖动可以移动滑块,上面大图里面带有小图背景的滑块也会跟随移动,移动到大图背景缺少区域即可完成验证.以上效果要实现,需要鼠标按下(mousedown事件),鼠标松开(mouseup事件),鼠标移动(mousemove事件)这几个事件. 先制作html部分实现静态效果,大图里面可移动的小块背景大小与大图一致,给小图块的背景添加background-position属性来控制小
-
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
本文实例讲述了php+js实现的拖动滑块验证码验证表单操作.分享给大家供大家参考,具体如下: 现在很多网站,比如淘宝,京东等都改用使用极验拖动验证码实现登录,这种方式比传统的验证码方式有更好的体验,减少用户输入的错误,也同样能起到防盗刷的功能.现在很多极验都是第三方的,也很多都是收费的.今天在这里给大家分享自己用原生php实现的一个极验的代码.用原生php的好处就是以后你要嵌套到什么框架,可以直接用核心代码,改一改就好了. 极验拖动动画图 代码文件截图 代码实现 html文件 <!DOCTYPE
-
JavaScript实现滑块验证案例
本文实例为大家分享了JavaScript实现滑块验证的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
-
js canvas实现滑块验证
本文实例为大家分享了js canvas实现滑块验证的具体代码,供大家参考,具体内容如下 滑块验证 话不多说先上代码想用的小伙伴可以直接使用,想了解的我后面会说下我的思路 <template> <div class="sliderContent"> <div class="imgDev" :style="'width:' + width + 'px;'"> <canvas :id="id"
-
js实现移动端图片滑块验证功能
之前写过一篇uniapp框架的滑块验证,今天抽个空用原生js实现这个功能,pc端暂时不做,因为pc端只要把touch事件改成mouse事件就能实现,这里就不再重复写了. (最新完美版本,js+canvas实现,兼容pc,ie9和移动,js+cavans实现图片滑块验证) 老样子,还是先看效果 原理和上篇uniapp的滑块一样,不一样的是这里是纯js实现,代码是全部是自己写的,有不清楚的可以留言. 下面是全部代码: html: <!DOCTYPE html> <html lang=&quo
-
javascript实现支付宝滑块验证码效果
支付宝的滑块验证效果,又刷新了大家对于验证码的认知,这种滑块效果,改善了用户体验.除了它外观和用户体验上的优秀外,其实它的安全性也并未降低,后端对用户行为的分析依然保证了安全校验. 下面我们在此介绍一下,滑块效果的前端实现. 涵盖的内容主要: 滑块前端样式(html排版),滑块的闪光移动效果(CSS3 动画),以及滑块滑动脚本的编写(javascript 移动,点击,拖拽事件的编写.) 备注: 本实例基于网上Demo 增添 CSS效果 和 修复 JS BUG 等问题.大家直接粘贴代码到对应的文件
-
js+cavans实现图片滑块验证
本文实例为大家分享了js+cavans实现图片滑块验证的具体代码,供大家参考,具体内容如下 js已封装好,拿来即用,兼容pc端和移动端, 效果: 移动端: pc端: 原理就不解释了,我之前的博客已经说过,只不过这个版本是结合了canvas实现,又兼容了pc端,直接拿代码就能用了. 代码:html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">