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