携帯端末効果(一)スライダ効果
3139 ワード
今、フロントエンドのコードを書くにはいろいろなフレームワークとライブラリがあります.軽くて簡単に私たちの機能を実現します.長く書くと、オリジナルjsがぼやけるかもしれません.強固にするために、オリジナルのコードを書き続けます.今日はこれからです.
先行効果:
携帯端末のスライダ効果は、webappをする可能性がありますが、次は実現します.
html構造
jsロジック
先行効果:
携帯端末のスライダ効果は、webappをする可能性がありますが、次は実現します.
html構造
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)
}