用JS怎么实现滑块滑动解锁的效果,代码是什么

Admin 2022-06-08 群英技术资讯

这篇文章给大家分享的是用JS怎么实现滑块滑动解锁的效果,代码是什么。小编觉得挺实用的,因此分享给大家做个参考,文中的介绍得很详细,而要易于理解和学习,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧。

本文实例为大家分享了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>

 效果图如下:


现在大家对于用JS怎么实现滑块滑动解锁的效果,代码是什么的内容应该都有一定的认识了吧,希望这篇能对大家有所帮助。最后,想要了解更多,欢迎关注群英网络,群英网络将为大家推送更多相关的文章。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

猜你喜欢

群英网络开启智能安全云计算之旅

注册领取新人大礼包
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务

联系我们

24小时售后 24小时售后TEL:0668-2555666 售前咨询TEL:400-678-4567 投诉建议TEL:0668-2555999 投诉建议邮箱:[email protected] 信息安全TEL:0668-2555118 域名空间客服 公司总机:0668-2555555 公司传真:0668-2555000
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部