js实现移动端H5页面手指滑动刻度尺功能


Posted in HTML / CSS onNovember 16, 2017

 写了一个在移动端使用的可滑动刻度尺,曾经在原生App中看到过,做得很精细,现在用web页面实现的;

实现效果如下:(源码见文章的最后)

js实现移动端H5页面手指滑动刻度尺功能

封装成直接可用的MeasureRuler.js

调用方法:

//初始化尺子
    var measureRuler =new MeasureRuler({
   
 wrapperId:"rulerWrapper",     //容器ID,页面中写一个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)

js实现移动端H5页面手指滑动刻度尺功能

 
 

切换刻度尺状态,满足不同量程,重绘刻度尺          

//重新设定新的参数
           var    nParam={
                max:5,
                minUnit:0.5,
                unitSet:2,
                mult:3,
                value:1.5
            }
            //重新绘制图
        measureRuler.reDrawRuler(nParam);

js实现移动端H5页面手指滑动刻度尺功能

 

GitHub源码分享:(如果觉得有用记得给个Star哦)

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

                https://3water.com/jiaoben/514412.html

              注:存在问题

               组件使用touch事件,捕捉滑动范围,但是当最小刻度为1时即每一刻度为10px,小范围滑动得不精准,需要反复前后小心滑动才能滑到像滑到的刻度点;

总结

以上所述是小编给大家介绍的js实现移动端H5页面手指滑动刻度尺功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3中Color的一些特性介绍
May 27 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 HTML / CSS
使用phonegap进行提示操作的具体方法
Mar 30 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 #HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 #HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 #HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 #HTML / CSS
详解HTML5新增标签
Nov 27 #HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 #HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 #HTML / CSS
You might like
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
php报错502badgateway解决方法
2019/10/11 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python基本数据类型详细介绍
2014/03/11 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
python输入错误后删除的方法
2019/10/12 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
八年级物理教学反思
2014/01/19 职场文书
职工小家建设活动方案
2014/08/25 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
用Python可视化新冠疫情数据
2022/01/18 Python
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技
Golang入门之计时器
2022/05/04 Golang