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实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
Css预编语言及区别详解
Apr 25 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 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中根据变量的类型 选择echo或dump
2012/07/05 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
vuejs如何配置less
2017/04/25 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
python实现扫描日志关键字的示例
2018/04/28 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
中软Java笔试题
2012/11/11 面试题
奶茶店创业计划书范文
2014/01/17 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书