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 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
CSS3新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
php打造属于自己的MVC框架
2012/03/07 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
美国创意之家:BulbHead
2017/07/12 全球购物
个人职业生涯规划书1500字
2013/12/31 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
2016大学军训通讯稿
2015/11/25 职场文书