小编给大家分享一下如何使用javascript实现滑动解锁功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
创新互联建站自2013年创立以来，先为永川等服务建站，永川等地企业，进行企业商务咨询服务。为永川企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
效果图：
代码如下：
* {
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;
}
＞
滑动解锁
∨
