h5页面实现可滑动刻度尺

    写了一个在移动端使用的可滑动刻度尺,曾经在原生App中看到过,做得很精细,现在用web页面实现的;

  实现效果如下:(源码见文章的最后)

  

    封装成直接可用的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)

   

  

    切换刻度尺状态,满足不同量程,重绘刻度尺

              //重新设定新的参数
           var    nParam={
                max:5,
                minUnit:0.5,
                unitSet:2,
                mult:3,
                                value:1.5
            }
            //重新绘制图
        measureRuler.reDrawRuler(nParam);

    

    

    源码分享:

       http://files.cnblogs.com/files/xingxiangyi/ruller.zip

注:存在问题

组件使用touch事件,捕捉滑动范围,但是当最小刻度为1时即每一刻度为10px,小范围滑动得不精准,需要反复前后小心滑动才能滑到像滑到的刻度点,如有谁能改进麻烦告知;

    

  

时间: 2024-11-05 23:24:21

h5页面实现可滑动刻度尺的相关文章

H5页面解决左右滑动问题

在head里面加入. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,minimum-scale=1.0, maximum-scale=1.0"> 如果还是有左右滑动出现空白的地方,在代码模块最外面一层div 加上内联样式   style="width:100%;overflow-x:hidden" 即可.

手机H5页面,滑动到底部自动加载下一页内容

做公众号项目中有如下场景,一个H5页面有列表数据,不考虑一次加载所有数据,故需要分页操作,解决方案为滑动到底部自动加载下一页内容.直接在H5的js当中实现. 主要使用jquery的scroll()方法: 当用户滚动指定的元素时,会发生 scroll 事件. scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口). scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数. 代码如下: $(window).scroll(function()

h5页面滑动卡顿解决方法

解决方式: 给滚动的元素加样式:-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling(允许独立的滚动区域和触摸回弹) 如果值为auto,就是普通的滚动,手指离开就停止滚动,让人感觉有点卡顿 如果设置为touch,在手指离开后还会滚一下,有回弹效果,看上去很流畅 但是刚开始用的时候有个小bug,h5页面打包成app时,一开始写成了*{-webkit-overflow-scrolling: touch;},导致滚动到最后页面底部出

移动端h5页面常见问题总结

从去年开始在公司一直做嵌入式的h5页面,遇见了很多问题,做一个小小的总结~ 1.IOS设备链接.按钮等点击产生灰色背景 在傲娇的iOS中可点击元素被点击时候会出现覆盖显示的高亮颜色,也就是一个灰色的阴影,特别难看,尤其是在元素占地面积还比较大的时候.这个可以通过 -webkit-tab-highlight-color 这个css属性来设置,你可以改成任何你想要的颜色,也可以去掉. -webkit-tab-highlight-color:rgba(0,0,0,0);//去掉背景高亮 -webkit

自定义H5页面规范

查看详情页也可支持自定义H5页面,用来展示更多内容. 交互规范 分屏切换,支持横向和竖向,滑动指引需清晰 若详情页加载较慢,需设计loading页,给予用户友好的提示 如有视频,需在底部加上“建议在Wi-Fi环境下播放”提示 建议一个页面不超过两种以上交互操作 设计规范 页面尺寸建议:640像素×1100像素 最小按钮宽度:160像素 最小按钮高度:60像素 页面最小字号:不小于24像素 二维码最小尺寸:200像素×200像素 ,边距至少为10像素 背景音乐规范:必须支持音乐可循环及可关闭,并采

【干货】微信场景之H5页面制作免费工具大集合

营销代有手段出,各领风骚数百天.要说现在哪些营销方式最能传播,屡屡刷爆朋友圈的H5页面肯定就是首当其冲的,提到H5页面,就立马想到"围住神经猫",上线微信朋友圈3天的时间便创造了用户500万,访问量超1亿的神话. H5如此势头,不得不让营销人对H5页面的未来充满了期待,越来越多的人开始在营销中运用H5页面.其实在移动端各个领域,H5页面的叫法很多,也会称为翻翻看.手机微杂志.广告页.场景应用.海报\画报(动态海报.指尖海报.掌中海报.动画海报.微画报.微海报)等等,经常能见到的就是滑动

h5页面

h5 界面设计遵循的尺寸:6:750*1334:6plus:1080*1920:android:720*1280 h5的特点:滚屏式页面,区分于网页有独立的滑动条,这就要求我们在设计h5时应注意没屏的内容必须单独存在于本屏幕中,不得跨界,否则超出内容看不到, h5页面在数量上控制在5-8屏,太少,意义不大,因为它另一个特点就是多维度的展示活动主题的,所以在数量上要维持好,多了乏味,观赏者也没有那没多的时间或者说兴趣. h5设计时注意事项:背景.排版或其他方面要有所统一,单是也要在色彩,形状或其他

手机版制作H5页面免费工具大集合

搜狐快站 搜狐快站是搜狐推出的免费一站式移动建站云平台,不久前他们也进军了H5页面制作的领域.拖拽式操作,简单易上手:有辅助线,支持图片微调:背景图片有滤镜功能,同一组件支持多重动画,自主程度高.另外还支持表单.电话.视频.自动播放.JS插件等功能.最重要的是,上述功能全部免费,完全无需担心制作成本. 初页 初页作为手机端制作动态海报的APP,门槛还是比较低的,容易上手,可以直接在手机上编辑,制作极为便利,图文混排的模板也很丰富.可免费下载安卓版和苹果版初页App,或通过电脑在线创建.编辑,轻松

10个H5页面制作工具

目前市面上各种H5页面制作工具,其中既有滥竽充数的,也有真材实料的.但是怎么区分呢?其实最简单的办法就是看案例,也就是用这些H5页面制作工具能做出哪些类型的H5. 笔者在创作H5的路上走过很多坑,基本国内外所有的H5页面制作工具都用了一遍,这篇文章也是希望能让大家在H5页面制作工具的选择上少走点弯路. 以下是笔者浏览了近万个优质案例后,总结出来的各大H5页面制作工具对H5种类的支持分析,以及付费情况. 1. 易企秀 http://www.eqxiu.com/ 百度指数:★★★★★ 易企秀界面 作