js实现滑动滑块验证登录的方法

发布时间：2020-07-27 09:29:26

来源：亿速云

阅读：110

作者：小猪

这篇文章主要讲解了js实现滑动滑块验证登录的方法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

1.html代码

2.css样式

最大的盒子相对定位,其他内部内容绝对定位

需要根据层级设置z-index保证滑动的正常使用

.box{

position: relative;

width: 300px;

height: 34px;

background: #e8e8e8;

border-radius: 4px;

left: 20px;

}

.btn{

position: absolute;

top: 0;

width: 40px;

height:32px;

text-align: center;

line-height: 32px;

border-radius: 4px;

z-index: 3;

background-color: #fff;

border: 1px solid #ccc;

color: black;

}

.text{

position: absolute;

width: 100%;

margin: 0;

text-align: center;

line-height: 34px;

display: block;

z-index: 2;

/*-webkit-margin-before: 1em;

-webkit-margin-after: 1em;*/

}

.bg{

position: absolute;

height: 100%;

background-color: yellowgreen;

z-index: 1;

}

样式

3.js事件

分析使用过程：按住滑块并拖动可以移动,中途松开滑块返回起始位置，拖动至最后滑块不动

分析动作：

1.按钮按下并移动

2.事件状态:event对象(鼠标位置)event.clientX获得与X轴的距离

3.松开按钮回到原处

4.结束，松开按钮，按钮不可再次拖动

1)

var btn=document.querySelector(".btn");

var box=document.querySelector(".box");

var bg=document.querySelector(".bg");

var text=document.querySelector(".text");

或者使用封装选择器

function $(name){

return document.querySelector(name);

};

var box=$(".box"),btn=$(".btn").....;

2)按下

按下后获得与x轴的距离

btn.οnmοusedοwn=function(e){

var downX=e.clientX;

3)拖动

拖动后获得与x轴距离减去初始值距离得到按钮移动的值

根据移动的值：判断按钮是否可以正常移动，判断按钮是否已经完成验证

btn.οnmοusemοve=function(e){

var moveX=e.clientX-downX;

// console.log(moveX);

//移动范围

if(moveX>-2){

this.style.left=moveX+"px";//将移动值赋值给滑块

bg.style.width=moveX+"px";//背景

if(moveX>=(box.offsetWidth-btn.offsetWidth)){//包含原始宽度内边距边框，不包含外边框

//拖到头，验证成功

flag=true;

text.innerHTML="验证成功";

text.style.color="white";

//事件清除

btn.οnmοusedοwn=null;

btn.οnmοusemοve=null;

}

}

4)松开按钮

回到原处清除拖动

btn.οnmοuseup=function(){

//事件清除

btn.οnmοusemοve=null;

if(flag)return;

this.style.left=0;//将移动值赋值给滑块

bg.style.width=0;//背景

}

4.效果

5.源码

//原生写法

window.οnlοad=function(){

var btn=document.querySelector(".btn");

var box=document.querySelector(".box");

var bg=document.querySelector(".bg");

var text=document.querySelector(".text");

//封装选择器

// function $(name){

// return document.querySelector(name);

// };

// var box=$(".box"),btn=$(".btn").....;

var flag=false;

//按下onmousedown 拖动onmousemove

//document.querySelector(".btn").οnmοusedοwn=function(event){//event事件状态

// var e=event||window.event;

//获取方法集合，可直接通过id, 类, 类型, 属性, 属性值等来选取元素(返回此名字的第一个)。

btn.οnmοusedοwn=function(e){//按下

var downX=e.clientX; //按下后对x轴的距离

// console.log(downX);

// alert("1");

btn.οnmοusemοve=function(e){//拖动

var moveX=e.clientX-downX; //拖动后与x轴距离减去初始值距离，移动值

// console.log(moveX);

//移动范围

if(moveX>-2){

this.style.left=moveX+"px";//将移动值赋值给滑块

bg.style.width=moveX+"px";//背景

if(moveX>=(box.offsetWidth-btn.offsetWidth)){//包含原始宽度内边距边框，不包含外边框

//拖到头，验证成功

flag=true;

text.innerHTML="验证成功";

text.style.color="white";

//事件清除

btn.οnmοusedοwn=null;

btn.οnmοusemοve=null;

}

}

}

}

//松开按钮

btn.οnmοuseup=function(){

//事件清除

btn.οnmοusemοve=null;

if(flag)return;

this.style.left=0;//将移动值赋值给滑块

bg.style.width=0;//背景

}

}

看完上述内容，是不是对js实现滑动滑块验证登录的方法有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。