javascript实现滑动解锁功能_网络技术_宿州市腾雀网络科技有限公司

javascript实现滑动解锁功能

发布时间 - 2026-01-11 00:17:43 点击率：次

效果图：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <style type="text/css">
 * {
 margin: 0;
 padding: 0;
 }
 #slider-box {
 width: 300px;
 height: 50px;
 border-radius: 4px;
 background: #ccc;
 margin: 250px auto;
 position: relative;
 }
 #slider {
 width: 48px;
 height: 48px;
 border: 1px solid #eee;
 text-align: center;
 line-height: 48px;
 display: inline-block;
 background: #fff;
 border-radius: 4px;
 cursor: move;
 position: absolute;
 left: 0;
 z-index: 5;
 }
 #slider-text {
 text-align: center;
 line-height: 50px;
 display: inline-block;
 width: 100%;
 height: 50px;
 font-family: "微软雅黑";
 position: absolute;
 left: 0;
 z-index: 4;
 }
 #slider-bg {
 width: 0;
 height: 48px;
 background: green;
 position: absolute;
 z-index: 3;
 border-radius: 4px;
 }
 #slider-Emerge {
 width: 100px;
 background:;
 height: 50px;
 position: absolute;
 }
 #stop-go {
 width: 48px;
 height: 48px;
 border: 1px solid #eee;
 background:#36F;
 position: absolute;
 right: -1px;
 display: none;
 text-align: center;
 line-height: 48px;
 color: #fff;
 font-family: "微软雅黑";
 border-radius: 4px;
 z-index: 5;
 }
 div{
 -moz-user-select:none;
 -webkit-user-select:none;
 user-select:none; 
 }
 </style>
</head>
<body>
 <div id="slider-box">
 <span id="slider">＞</span>
 <span id="slider-text">滑动解锁</span>
 <span id="slider-bg"></span>
 <span id="slider-Emerge"></span>
 <span id="stop-go">∨</span>
 </div>
</body>
 <script type="text/javascript">
 var sliderel={
  $: function(selector){
  return document.getElementById(selector)
  },
 getEvent:function(e){

  var e=e || window.event
  return e;
 },
 stopBubble:function(e){
  var e =this.getEvent(e)
  if(typeof e.preventDefault != "undefined"){
  e.preventDefault();
  }else{
  e.returnValue = false;
  }
 }
 },
 Elemt={
 flag:false,
 nowMoseX: 0,
 mx:sliderel.$("slider-box"),
 sd:sliderel.$("slider"),
 st:sliderel.$("slider-text"),
 sb:sliderel.$("slider-bg"),
 se:sliderel.$("slider-Emerge"),
 sg:sliderel.$("stop-go"),
 }
 Elemt.sd.onmousedown=function(e){ 
  var e =sliderel.getEvent(e)
  sliderel.stopBubble(e);
  Elemt.flag=true
  nowMoseX=e.clientX-Elemt.sd.offsetLeft;
 }
 //滑块最大移动的距离
 maxMove=Elemt.mx.offsetWidth -Elemt.sd.offsetWidth;
 //鼠标移动的时候是否成功
 Elemt.mx.onmousemove=function(e){
  var e =sliderel.getEvent(e)
  if(Elemt.flag){
  var moveX=e.clientX-nowMoseX;
  var oElemLeft=Elemt.sd.offsetLeft;//判断滑块移动的范围  
  if(oElemLeft<0){ //判断滑块是否超出限制位置
  moveX=0;
  Elemt.flag=false
  }else if(oElemLeft>maxMove){
  moveX=maxMove;
  Elemt.sg.style.display="block";
  Elemt.sd.style.display="none"
  Elemt.sb.style.width=300+"px"
  Elemt.st.innerHTML="滑动成功"
  Elemt.st.style.color="#fff"
  }
  }
  Elemt.sd.style.left=moveX+"px" 
  Elemt.sb.style.width=oElemLeft+20+"px";
 }
 //当鼠抬起判断是否滑动成功
 Elemt.mx.onmouseup=function(e){
  var e =sliderel.getEvent(e)
  Elemt.flag=false
  if(Elemt.sd.offsetLeft<maxMove){
  speed=Math.ceil(Elemt.sd.offsetLeft/40);
  time=setInterval(function(){
  if(Elemt.sd.offsetLeft>=0){
   Elemt.sd.style.left=Elemt.sd.offsetLeft-speed+"px";
   Elemt.sb.style.width=Elemt.sb.offsetWidth-speed+"px";
  }else{
   clearInterval(time);
   return false;
  }
  },10)
  }
  }
 //当鼠离开是否滑动成功 
 Elemt.sd.onmouseout=function(e){
  sliderel.stopBubble(e);
  Elemt.flag=false;
  if( Elemt.sd.offsetLeft<maxMove){
  speed=Math.ceil(Elemt.sd.offsetLeft/40);
  time=setInterval(function(){
  if(Elemt.sd.offsetLeft>=0){
   Elemt.sd.style.left=Elemt.sd.offsetLeft-speed+"px";
   Elemt.sb.style.width=Elemt.sb.offsetWidth-speed+"px";
  }else{
   clearInterval(time);
   return false;
  }
  },10);
  }
 }
 </script>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# js实现滑动解锁 # javascript # 滑动 # 滑动事件 # jQuery使用unlock.js插件实现滑动解锁 # javascript实现滑动解锁功能 # js实现html滑动图片拼图验证 # JS实现滑动拼图验证功能完整示例 # js+canvas实现滑动拼图验证码功能 # 使用 Node.js 模拟滑动拼图验证码操作的示例代码 # JS实现PC手机端和嵌入式滑动拼图验证码三种效果 # javascript结合Flexbox简单实现滑动拼图游戏 # 原生js实现简单滑动解锁功能 js实现滑动拼图解锁 # 微软 # 滑块 # 鼠标 # 解锁 # 判断是否 # display # eee # line # solid # background # ccc # border # radius # position # relative # auto # index # left # font # green

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Linux常用命令如何掌握_高频场景实战指导更易上手【教程】

下一篇：VSCode的扩展包(Extension Packs)：一键

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Linux常用命令如何掌握_高频场景实战指导更易上手【教程】

下一篇：VSCode的扩展包(Extension Packs)：一键