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和HTML5的支持状况
Oct 31 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 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
第十一节--重载
2006/11/16 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
vue中h5端打开app(判断是安卓还是苹果)
2021/02/26 Vue.js
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
Python中用altzone()方法处理时区的教程
2015/05/22 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
售后专员岗位职责
2013/12/08 职场文书
英语专业学生个人求职信范文
2014/01/06 职场文书
创意活动策划书
2014/01/15 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
借款协议书
2014/04/12 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
环保倡议书300字
2014/05/15 职场文书
二手房购房意向书
2015/05/09 职场文书
起诉意见书范文
2015/05/19 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书