首页 > 代码库 > 原生JavaScript+CSS3实现移动端滑块效果
原生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>147 <div class="swifter-track"></div>148 </div>149 </div>150 </div>151 </div>152 <script>153 // 获取className154 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>
原生JavaScript+CSS3实现移动端滑块效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。