小编给大家分享一下如何使用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;
}
＞
滑动解锁
∨
