js完成挪动端H5网页页面手指拖动刻度尺作用

日期:2020-09-18 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

 写了1个在挪动端应用的可拖动刻度尺,以前在原生态App中看到过,做得很细致,如今用web网页页面完成的;

  完成实际效果以下:(源代码见文章内容的最终)

    封裝成立即能用的MeasureRuler.js

    启用方式:

//原始化尺子
    var measureRuler =new MeasureRuler({
        wrapperId:"rulerWrapper",     //器皿ID,网页页面中写1个DIV就行 (务必)
        max:2000,                     //刻度尺最大的刻度    (非务必,默认设置为2000)
        minUnit:1,                    //刻度尺最少刻度    (非务必,默认设置为1)
        unitSet:10,                   //刻度尺模块长度    (非务必,默认设置是10)
      value:5,                      //原始化标值       (非务必,默认设置为1)
        mult:1,     //刻度值倍数,默认设置是最少刻度值为10px,假如定mult为3则最少刻度为30px (非务必,默认设置为1)
        callback:rulerSetValue        //拖动尺子全过程中的回调函数涵数     (非务必)
        })  

   给刻度尺取值

   //给刻度值取值为3
    measureRuler.setValue(3)

   
 

    切换刻度尺情况,考虑不一样量程,重绘刻度尺          

  //再次设置新的主要参数
           var    nParam={
                max:5,
                minUnit:0.5,
                unitSet:2,
                mult:3,
                value:1.5
            }
            //再次绘图图
        measureRuler.reDrawRuler(nParam);

    
 

    GitHub源代码共享:(假如感觉有效记得给个Star哦)

       https://github.com/xingxiaoyiyio/h5-ruler/tree/master

                https://www.jb51.net/jiaoben/514412.html

              注:存在难题

               组件应用touch恶性事件,捕获拖动范畴,可是当最少刻度为1时即每刻度为10px,小范畴拖动得不精确,必须不断前后左右当心拖动才可以滑到像滑到的刻度点;

总结

以上所述是网编给大伙儿详细介绍的js完成挪动端H5网页页面手指拖动刻度尺作用,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:HTML5 device access 机器设备浏览详解 返回下一篇:没有了