手機端效果（一）滑塊效果

2021-09-17 08:29:06 字數 1272 閱讀 2060

現在寫前端**有各種各樣的框架和庫，輕輕鬆鬆就實現我們要的功能，寫久了，原生js可能會模糊，為了鞏固，會陸續寫一些原生的**，今天就從這個開始。

先上效果：

html結構
css**：

*


.range


.range:before,.range-bar,.range-text,.range-progress


.range:before


.range:before,.range-progress


.range-bar


.range-progress


.range-text
js邏輯

/*阻止頁面的預設滑動*/


window.addeventlistener('touchmove',function (e) )


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) )


range.addeventlistener('touchmove',function (event) );


range.addeventlistener('touchstart',function (event) )


//顯示位置


function render(value) 


if(left>=maxw)


/*顯示滑塊的位置、進度條的長度、進度值*/


bar.style.left=left+'px';


progress.style.width=left+'px';


text.innertext=math.ceil(left/maxw*100)+'%';


}function $(s)

jQuery實現滑塊滑動驗證效果

css drag drag handler handler bg handler ok bg drag drag bg drag drag text jquery var verifypass function var options extend defaults,options 新增背景，文字，...

手機左右滑動效果

li box box ul box ul li box ul li span 之上要先引入jq box ul li on touchstart function event 給予css樣式 this css marginleft bi 如果是右側顯示的話 else if mgl 0 向右滑動 els...

移動端彈性效果

布局一 定義頁面整體高度為100 然後使用 position absolute 布局可解決 header 彈性滾動區域 footer html,body wrap header,footer header footer main 布局二 定義頁面整體高度為100 然後使用 display flex ...