亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

  發(fā)布時(shí)間:2017-11-16 16:30:30   作者:佚名   我要評(píng)論
這篇文章主要介紹了js實(shí)現(xiàn)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
  • 純js簡(jiǎn)單的滑動(dòng)按鈕插件

    這是一個(gè)簡(jiǎn)單的純js滑動(dòng)按鈕插件。將checkbox元素變?yōu)楹每吹膇OS或Material Design樣式的滑動(dòng)按鈕,簡(jiǎn)單實(shí)用,需要的朋友可下載試試
    2017-06-19
  • jQuery滑動(dòng)解鎖插件unlock.js

    unlock.js是一款jQuery滑動(dòng)解鎖插件。需要滑動(dòng)指定的滑塊到指定位置,才能通過(guò)驗(yàn)證,歡迎下載試試
    2017-03-29

最新評(píng)論