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 相关文章推荐
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
css3实现背景图片拉伸效果像桌面壁纸一样
Aug 19 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
canvas绘制树形结构可视图形的实现
Apr 03 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 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与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
php检测useragent版本示例
2014/03/24 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
JavaScript OOP类与继承
2009/11/15 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
python实现学员管理系统
2019/02/26 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
python线程的几种创建方式详解
2019/08/29 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
基于Python实现粒子滤波效果
2020/12/01 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
html5 div布局与table布局详解
2016/11/16 HTML / CSS
护理学专业推荐信
2013/12/03 职场文书
广告学毕业生求职信
2014/01/30 职场文书
户外活动策划方案
2014/03/12 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
文明班级建设方案
2014/05/15 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
2014年协会工作总结
2014/11/22 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
女性健康讲座主持词
2015/07/04 职场文书
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript