在做web页面时，无论PC端还是移动端，我们会遇到滑块这样的效果，可能我们往往会想着去网上找插件，其实这个效果非常的简单，插件代码的的代码往往过于臃肿，不如自己动手，自给自足。首先看一下效果图：

分析效果：

1、按钮的右侧有一个小动画，深黄色的小头是一圈圈循环流动的。

2、只在按钮上滑动可以启动按钮。

3、并且要判断按钮是否滑到头，如果没有滑到头，手指离开屏幕，按钮自动弹回左侧；如果滑到头，执行一个函数。

解决办法：

1、动画效果需要使用CSS3里面的@keyframes来操作，代码如下：

 1 .god-bottom .swifter-track{
 2     width: 50%;
 3     height: 93%;
 4     border-radius: 5px;
 5     position: absolute;
 6     right:0;
 7     top:0;
 8     background:  url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track1.png") no-repeat 0 55%;
 9     background-size: 100% 70%;
10     -webkit-animation:track 0.5s infinite;
11     animation:track 0.5s infinite;
12 }
13 @keyframes track {
14     0%{
15         background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track1.png") no-repeat 0 55%;
16         background-size: 100% 70%;
17     }
18     35%{
19         background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track2.png") no-repeat 0 55%;
20         background-size: 100% 70%;
21     }
22     70%{
23         background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track3.png") no-repeat 0 55%;
24         background-size: 100% 70%;
25     }
26     100%{
27         background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track4.png") no-repeat 0 55%;
28         background-size: 100% 70%;
29     }
30 }
31 @-webkit-keyframes  track {
32     0%{
33         background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track1.png") no-repeat 0 55%;
34         background-size: 100% 70%;
35     }
36     35%{
37         background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track2.png") no-repeat 0 55%;
38         background-size: 100% 70%;
39     }
40     70%{
41         background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track3.png") no-repeat 0 55%;
42         background-size: 100% 70%;
43     }
44     100%{
45         background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track4.png") no-repeat 0 55%;
46         background-size: 100% 70%;
47     }
48 }

2、这里需要分别监听touchstart、touchmove、touchend事件，代码如下：

 1 function sliderFun(outDiv,inDiv,funName) {
 2     var startX,endX,distance=0;
 3     var dis=outDiv.clientWidth-inDiv.clientWidth;
 4     inDiv.addEventListener('touchstart',function (e) {
 5         startX=e.touches[0].clientX;
 6     },false)
 7     inDiv.addEventListener('touchmove',function (e) {
 8         endX=e.touches[0].clientX;
 9         distance=endX-startX;
10         if(distance<=dis&&distance>=0){
11             inDiv.style.left=distance+'px';
12         }
13     },false)
14     inDiv.addEventListener('touchend',function (e) {
15         if(distance<=dis&&distance>=0){
16             inDiv.style.left='0px';
17         }else if(distance>=dis){
18             funName();
19         }
20     },false)
21 }

为了方便大多去测试呢，最后我把所有的代码一并贴上，希望可以帮助到大家：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!--强制以webkit内核来渲染-->
  6     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"><!--按设备宽度缩放，并且用户不允许手动缩放-->
  7     <meta name="format-detection" content="telephone=no"><!--不显示拨号链接-->
  8     <title></title>
  9     <style>
 10         *{
 11             margin:0;
 12             padding:0;
 13         }
 14         html,body{
 15             width:100%;
 16         }
 17         .shadow-big{
 18             width: 100%;
 19             height: 100%;
 20             background-color: rgba(0,0,0,0.6);
 21             position: fixed;
 22             z-index: 2;
 23             top: 0;
 24             left:0;
 25             /*display: none;*/
 26         }
 27         .money-god-big{
 28             width: 77.333vw;
 29             height: 93vw;
 30             position: fixed;
 31             left:0;
 32             right:0;
 33             top:40vw;
 34             margin: auto;
 35             z-index: 10;
 36         }
 37         .god-bottom{
 38             width: 82.759%;
 39             height: 58.333%;
 40             margin: 0 auto;
 41             background-color: #d63532;
 42             border-radius: 8px;
 43             position: relative;
 44         }
 45         .god-bottom>div{
 46             position: absolute;
 47             left:0;
 48             right:0;
 49             margin: auto;
 50             text-align: center;
 51             width: 100%;
 52             color: #fff;
 53             font-size: 4.8vw;
 54         }
 55         .god-bottom .bottom-ttl{
 56             top: 9.524%;
 57             color: #fcd741;
 58         }
 59         .god-bottom .bottom-money{
 60             top: 27.381%;
 61             font-size: 9.6vw;
 62         }
 63         .god-bottom .bottom-reward{
 64             top: 53.095%;
 65         }
 66         .god-bottom .swifter-out{
 67             width: 87.5%;
 68             height: 21.905%;
 69             top:70.952%;
 70             background-color: #a92d2b;
 71             border-radius: 5px;
 72             position: relative;
 73         }
 74         .god-bottom .swifter-in{
 75             width: 50%;
 76             height: 93%;
 77             background-color: #fcd741;
 78             border-radius: 5px;
 79             color: #d63532;
 80             font-size: 4.8vw;
 81             line-height: 2.4;
 82             position: absolute;
 83             left:0;
 84             top:0;
 85         }
 86         .god-bottom .swifter-track{
 87             width: 50%;
 88             height: 93%;
 89             border-radius: 5px;
 90             position: absolute;
 91             right:0;
 92             top:0;
 93             background:  url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track1.png") no-repeat 0 55%;
 94             background-size: 100% 70%;
 95             -webkit-animation:track 0.5s infinite;
 96             animation:track 0.5s infinite;
 97         }
 98         @keyframes track {
 99             0%{
100                 background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track1.png") no-repeat 0 55%;
101                 background-size: 100% 70%;
102             }
103             35%{
104                 background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track2.png") no-repeat 0 55%;
105                 background-size: 100% 70%;
106             }
107             70%{
108                 background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track3.png") no-repeat 0 55%;
109                 background-size: 100% 70%;
110             }
111             100%{
112                 background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track4.png") no-repeat 0 55%;
113                 background-size: 100% 70%;
114             }
115         }
116         @-webkit-keyframes  track {
117             0%{
118                 background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track1.png") no-repeat 0 55%;
119                 background-size: 100% 70%;
120             }
121             35%{
122                 background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track2.png") no-repeat 0 55%;
123                 background-size: 100% 70%;
124             }
125             70%{
126                 background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track3.png") no-repeat 0 55%;
127                 background-size: 100% 70%;
128             }
129             100%{
130                 background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track4.png") no-repeat 0 55%;
131                 background-size: 100% 70%;
132             }
133         }
134     </style>
135 
136 </head>
137 <body>
138     <!--shadow-->
139     <div class="shadow-big">
140         <div class="money-god-big">
141             <div class="god-bottom">
142                 <div class="bottom-ttl">支付成功 奖励红包</div>
143                 <div class="bottom-money">6.00元</div>
144                 <div class="bottom-reward">累计奖励23.25元</div>
145                 <div class="swifter-out">
146                     <div class="swifter-in">存入余额</div>
147                     <div class="swifter-track"></div>
148                 </div>
149             </div>
150         </div>
151     </div>
152     <script>
153 //        获取className
154         function CN(t) {
155             return document.getElementsByClassName(t);
156         }
157 
158         var swifterOut1=CN('swifter-out')[0];
159         var swifterIn1=CN('swifter-in')[0];
160         var trackImg1=CN('track-img')[0];
161       
162         var shadowBig=CN('shadow-big')[0];
163   
164         sliderFun(swifterOut1,swifterIn1,final1);
165 //        滑动效果
166         function sliderFun(outDiv,inDiv,funName) {
167             var startX,endX,distance=0;
168             var dis=outDiv.clientWidth-inDiv.clientWidth;
169             inDiv.addEventListener('touchstart',function (e) {
170                 startX=e.touches[0].clientX;
171             },false)
172             inDiv.addEventListener('touchmove',function (e) {
173                 endX=e.touches[0].clientX;
174                 distance=endX-startX;
175                 if(distance<=dis&&distance>=0){
176                     inDiv.style.left=distance+'px';
177                 }
178             },false)
179             inDiv.addEventListener('touchend',function (e) {
180                 if(distance<=dis&&distance>=0){
181                     inDiv.style.left='0px';
182                 }else if(distance>=dis){
183                     funName();
184                 }
185             },false)
186 }
187         function final1() {
188             alert("阴影将要消失了！");
189             shadowBig.style.display='none';
190         }
191     </script>
192 </body>
193 </html>