js實(shí)現(xiàn)移動(dòng)端H5頁(yè)面手指滑動(dòng)刻度尺功能

寫(xiě)了一個(gè)在移動(dòng)端使用的可滑動(dòng)刻度尺,曾經(jīng)在原生App中看到過(guò),做得很精細(xì),現(xiàn)在用web頁(yè)面實(shí)現(xiàn)的;
實(shí)現(xiàn)效果如下:(源碼見(jiàn)文章的最后)
封裝成直接可用的MeasureRuler.js
調(diào)用方法:
//初始化尺子 var measureRuler =new MeasureRuler({ wrapperId:"rulerWrapper", //容器ID,頁(yè)面中寫(xiě)一個(gè)DIV就行 (必須) max:2000, //刻度尺最大的刻度 (非必須,默認(rèn)為2000) minUnit:1, //刻度尺最小刻度 (非必須,默認(rèn)為1) unitSet:10, //刻度尺單元長(zhǎng)度 (非必須,默認(rèn)是10) value:5, //初始化數(shù)值 (非必須,默認(rèn)為1) mult:1, //刻度值倍數(shù),默認(rèn)是最小刻度值為10px,如果定mult為3則最小刻度為30px (非必須,默認(rèn)為1) callback:rulerSetValue //滑動(dòng)尺子過(guò)程中的回調(diào)函數(shù) (非必須) })
給刻度尺賦值
//給刻度值賦值為3 measureRuler.setValue(3)
切換刻度尺狀態(tài),滿足不同量程,重繪刻度尺
//重新設(shè)定新的參數(shù) var nParam={ max:5, minUnit:0.5, unitSet:2, mult:3, value:1.5 } //重新繪制圖 measureRuler.reDrawRuler(nParam);
GitHub源碼分享:(如果覺(jué)得有用記得給個(gè)Star哦)
https://github.com/xingxiaoyiyio/h5-ruler/tree/master
http://chabaoo.cn/jiaoben/514412.html
注:存在問(wèn)題
組件使用touch事件,捕捉滑動(dòng)范圍,但是當(dāng)最小刻度為1時(shí)即每一刻度為10px,小范圍滑動(dòng)得不精準(zhǔn),需要反復(fù)前后小心滑動(dòng)才能滑到像滑到的刻度點(diǎn);
總結(jié)
以上所述是小編給大家介紹的js實(shí)現(xiàn)移動(dòng)端H5頁(yè)面手指滑動(dòng)刻度尺功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JS實(shí)現(xiàn)左右兩側(cè)滑動(dòng)展開(kāi)菜單特效源碼
JS實(shí)現(xiàn)左右兩側(cè)滑動(dòng)展開(kāi)菜單特效源碼是一款手機(jī)端不錯(cuò)的側(cè)邊菜單插件,可以在同一個(gè)頁(yè)面設(shè)置多個(gè)側(cè)邊欄菜單代碼。本段代碼可以在各個(gè)網(wǎng)頁(yè)使用,有需要的朋友可以直接下載使2017-11-07- 這是一個(gè)簡(jiǎn)單的純js滑動(dòng)按鈕插件。將checkbox元素變?yōu)楹每吹膇OS或Material Design樣式的滑動(dòng)按鈕,簡(jiǎn)單實(shí)用,需要的朋友可下載試試2017-06-19
- unlock.js是一款jQuery滑動(dòng)解鎖插件。需要滑動(dòng)指定的滑塊到指定位置,才能通過(guò)驗(yàn)證,歡迎下載試試2017-03-29