原生JavaScript+CSS3实现移动端滑块效果

Posted reco_luan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生JavaScript+CSS3实现移动端滑块效果相关的知识,希望对你有一定的参考价值。

        在做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移动端事件——移动端滑屏切换的幻灯片

H5案例分享:移动端滑屏 touch事件

移动端原生js,css3实现轮播图

H5案例分享:移动端滑屏 touch事件

iWebKit 页面滑块 - Javascript

滑块相对于滑块拇指的显示值反应原生