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感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
php格式化工具Beautify PHP小小BUG
2008/04/24 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
php教程之phpize使用方法
2014/02/12 PHP
PHP和javascript常用正则表达式及用法实例
2014/07/01 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python写的英文字符大小写转换代码示例
2015/03/06 Python
Python3处理文件中每个词的方法
2015/05/22 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
python的turtle库使用详解
2019/05/10 Python
Python Django 命名空间模式的实现
2019/08/09 Python
python实现双人五子棋(终端版)
2020/12/30 Python
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
民主评议党员工作总结
2014/10/20 职场文书
村干部任职承诺书
2015/01/21 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS