html实现滑动解锁_javascript实现滑动解锁功能

效果图：

代码如下：

* {

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;

}

＞

滑动解锁

∨

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.οnmοusedοwn=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.οnmοusemοve=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.οnmοuseup=function(e){

var e =sliderel.getEvent(e)

Elemt.flag=false

if(Elemt.sd.offsetLeft

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.οnmοuseοut=function(e){

sliderel.stopBubble(e);

Elemt.flag=false;

if( Elemt.sd.offsetLeft

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);

}

}

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