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 相关文章推荐
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
用canvas画心电图的示例代码
Sep 10 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 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 mvc开发模式的感想
2011/06/28 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
学习jQuey中的return false
2015/12/18 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
Python中Collection的使用小技巧
2014/08/18 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
Python实现随机选择元素功能
2017/09/14 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
python实现批量注册网站用户的示例
2019/02/22 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
python实时监控logstash日志代码
2020/04/27 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
作风年建设汇报材料
2014/08/14 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python