趣味滑块解锁html游戏,js实现滑块解锁

效果图1:

效果图2：

html>

滑块验证

#container{

padding: 0;

margin: 0;

position: relative;

width:350px;

height: 50px;

border: 1px solid gray;

border-radius: 3px;

margin: 10px auto;

line-height: 50px;

user-select:none;

}

#success,#mark,#move{

position: absolute;

width: 100%;

height: 100%;

font-size: 20px;

font-weight: bold;

text-align: center;

color: white;

}

#success{

background: lightgreen;

}

#mark{

background:gray;

}

#move{

width: 50px;

background: white;

color: black;

top: 0;

left: 0;

cursor: move;

}

success!

please,slide!

>>

let move=document.getElementById('move'),

mark=document.getElementById('mark'),

container=document.getElementById('container'),

distance=container.getBoundingClientRect().width,//总长度

isstop=false,//是否到达终点

offL=container.offsetLeft,//容器左边距

moveL=null,//滑块左边距

scale=null;//渐变进度

move.οnmοusedοwn=function(event){

move.οnmοusemοve=function(event){

move.style.transform='';

moveL=event.clientX-offL-25,//让鼠标在滑块中间

scale=((moveL+25)/3.5)+'%';//左边距和总长度比率

if(moveL>distance-50){

isstop=true;

return;//返回不再执行下面的语句

}

move.style.setProperty('left',moveL+'px');

mark.style.setProperty('background',`linear-gradient(to right,

lightblue 0%,

lightblue ${scale},

gray ${scale},

gray 100%)`);

}

}

document.οnmοuseup=function(){//move不准确

if(isstop){

mark.style.setProperty('display','none');

move.innerText='√'

setTimeout(()=>{alert('success!')},200);

move.οnmοusedοwn=null;

move.οnmοusemοve=null;

document.οnmοuseup=null;

}else{

move.style.transform=`translateX(${-moveL}px)`;

mark.style.background='gray';

//mark.style.transition='all .5s';//因颜色过渡出现了底层的青色

move.οnmοusemοve=null;

}

}