JavaScript实现滑块验证解锁

本文实例为大家分享了Javascript实现滑块验证解锁的具体代码，供大家参考，具体内容如下

 

 
 
 // 引入矢量图标库
 
 
 
 * {
  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;
 }
 

 

 
 
 滑动验证
 
 


 

 效果图如下:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。