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中transform变换模型的渲染
May 27 HTML / CSS
css3之UI元素状态伪类选择器实例演示
Aug 11 HTML / CSS
详解Css3新特性应用之过渡与动画
Jan 10 HTML / CSS
css3打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
HTML5 placeholder属性详解
Jun 22 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 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编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
PHP之header函数详解
2021/03/02 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
python正则表达式match和search用法实例
2015/03/26 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
python远程邮件控制电脑升级版
2019/05/23 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
python实现一个猜拳游戏
2020/04/05 Python
python 元组的使用方法
2020/06/09 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
主管职责范文
2013/11/09 职场文书
教师党员承诺书
2014/03/25 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
用Python生成会跳舞的美女
2022/01/18 Python
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers
实战Python爬虫爬取酷我音乐
2022/04/11 Python