css部分

*{margin:0;padding: 0;box-sizing: border-box;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.outer{position: relative;margin:20px auto;width: 200px;height: 30px;line-height: 28px;border:1px solid #ccc;background: #ccc9c9;}.outer span,.filter-box,.inner{position: absolute;top: 0;left: 0;}.outer span{display: block;padding:0 0 0 36px;width: 100%;height: 100%;color: #fff;text-align: center;}.filter-box{width: 0;height: 100%;background: green;z-index: 9;}.outer.act span{padding:0 36px 0 0;}.inner{width: 36px;height: 28px;text-align: center;background: #fff;cursor: pointer;font-family: "宋體";z-index: 10;font-weight: bold;color: #929292;cursor: move;}.outer.act .inner{color: green;}.outer.act span{z-index: 99;}

html部分

<div class="outer" id="outer"><div class="filter-box"></div><span id="span">滑動解鎖</span><div class="inner" id="inner">>></div></div>

js部分

var inner=document.getElementById('inner');var outer=document.getElementById('outer');var span=document.getElementById('span');var left;var dx=outer.offsetWidth-inner.offsetWidth;//能移動的最大距離inner.οnmοusedοwn=function(event){//鼠標按下var event=window.event||ev;left=event.clientX-inner.offsetLeft;//鼠標按下時的位置document.οnmοusemοve=function(event){//鼠標移動var event = window.event||ev;lefta=event.clientX-left;//鼠標移動的距離 console.log(dx,lefta);if(lefta<0){lefta=0;}else if(dx<lefta){lefta=dx;}inner.style.left=lefta+'px';}document.onmouseup = function(event){//鼠標抬起var event = window.event||ev;document.onmousemove = null;document.onmouseup = null;lefta=event.clientX-left;if(lefta<0){lefta=0;span.innerHTML='滑動解鎖';}else if(dx<lefta){lefta=dx;span.innerHTML='解鎖成功';inner.innerHTML='√';inner.onmousedown=null;}else{lefta=0;}inner.style.left=lefta+'px';}; }

?

轉載于:https://www.cnblogs.com/aSnow/p/8796144.html

總結

以上是生活随笔為你收集整理的js写的滑动解锁的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。