小编给大家分享一下如何使用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; 
 }
 


 
 ＞
 滑动解锁
 
 
 ∨