手机端效果(一)滑块效果

2017-01-09 14:08:14来源:segmentfault作者:lihualong人点击

现在写前端代码有各种各样的框架和库,轻轻松松就实现我们要的功能,写久了,原生js可能会模糊,为了巩固,会陆续写一些原生的代码,今天就从这个开始。


先上效果:


手机端的滑块效果,做webapp的可能都会遇到过,下面来一次实现。


html结构


<div>
<div></div>
<span></span>
<span></span>
</div>

css代码:


*{
box-sizing: border-box;
}
.range{
width: 90%;
height: 40px;
position: relative;
margin: auto;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.range:before,.range-bar,.range-text,.range-progress{
position: absolute;
top:50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.range:before{
content: '';
display: block;
background-color: #ccc;
width: 100%;
}
.range:before,.range-progress{
height: 2px;
left:0;
}
.range-bar{
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background-color:#ccc ;
}
.range-progress{
background-color:#00b3ee;
}
.range-text{
top:100%;
left:90%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color:#999;
}

js逻辑


/*阻止页面的默认滑动*/
window.addEventListener('touchmove',function (e) {
e.preventDefault();
})
var range=$('.range');
var bar=$('.range-bar');
var progress=$('.range-progress');
var text=$('.range-text');
var maxw=range.offsetWidth-bar.offsetWidth;//计算可滑动的最大距离
var rangex=range.offsetLeft;
var half=bar.offsetWidth/2;bar.addEventListener('touchstart',function (event) {
var left=event.touches[0].pageX-rangex-half;
render(left);
event.preventDefault();
})
range.addEventListener('touchmove',function (event) {
/*计算滑块的left距离*/
var left=event.touches[0].pageX-rangex-half;
render(left);
});
range.addEventListener('touchstart',function (event) {
var left=event.touches[0].pageX-rangex-half;
render(left);
})//显示位置
function render(value) {
var left=value;
/*判断left距离不能小于0并且不能大于最大宽度*/
if(left<=0){
left=0;
}
if(left>=maxw){
left=maxw;
}
/*显示滑块的位置、进度条的长度、进度值*/
bar.style.left=left+'px';
progress.style.width=left+'px';
text.innerText=Math.ceil(left/maxw*100)+'%';
}
function $(s) {
return document.querySelector(s)
}

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台