javascript实现滑动解锁功能
网络编程 2021-07-04 18:31www.168986.cn编程入门
本篇文章主要介绍了javascript实现滑动解锁功能的方法实例,具有很好的参考价值。狼蚁网站SEO优化跟着长沙网络推广一起来看下吧
效果图:
代码如下:
<!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: #c; 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; } #s-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="s-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; }, sBubble: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.$("s-go"), } Elemt.sd.onmousedown=function(e){ var e =sliderel.getEvent(e) sliderel.sBubble(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.sBubble(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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持狼蚁SEO!
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程