最近2天一直在弄一个滑动的刻度效果,由于项目是基于Web App开发的,于是考虑到 移动端和pc端 的兼容性问题,考虑的比较多,尝试采用 Html5的Range 来做,目前已经兼容 pc端和移动端!

实现成果如下:

Html5 Range,缺点:

----------------------------------------------------------------------------------------------

1: 目前测试了(Chrome浏览器iphone6 )滑动不是实时的变化刻度,不知道为啥,其他平台都可以

2: 第一次改变srcElement.value后的值,不会生效,得主动出发一次。

Html5 Range,优点:

----------------------------------------------------------------------------------------------

1:可以做的特别漂亮,不用考虑实时显示的问题

2:滑动不用去做了,Range控件原生支持,其他看了渲染后的Range其实就是一个Shadow DOM(虚拟Dom树),这个也是基于Shaow DOM的组件式开发,感觉棒棒的。

3:Range支持很多个性化的参数设置(初始值:value, 最小值:min, 最大值:max)

Range 源码,如图:

----------------------------------------------------------------------------------------------

过程中遇到的问题如下:

----------------------------------------------------------------------------------------------

问题来了,怎样去点击控制Range的值,并且让它滑动?

答案:在Range的change事件里改变 srcElement.value,就可以了。 

Range美化的一篇文章分享:

----------------------------------------------------------------------------------------------

http://www.w3cplus.com/html5/styling-cross-browser-compatible-range-inputs-css.html

深度挖掘,Html5的 Range 滑动刻度的坑,兼容全平台,将任性进行到底!的更多相关文章

  1. html5向左滑动删除特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 8Manage:物流CRM,深度挖掘快递企业下一站蓝海!

    [导读]网购的普及加快了快递物流服务在中国的发展,而物流行业也开始展露出自身巨大的发展潜力和进步空间.其中,作为物流行业根本核心的物流客户关系管理开始引起了管理者的注意,如何升级用户物流服务体验,把握 ...

  3. css3+html5特效-向上滑动

    css+html5特效-向上滑动 效果描述:切换的下拉和上拉状态 鼠标悬浮:下拉鼠标离开:上拉 /*外容器设置*/ .box1{position:relative;top:100px;left:100 ...

  4. 基于HTML5手机上下滑动翻页特效

    基于HTML5手机上下滑动翻页特效.这是一款手机移动端触屏滑动翻页代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section class="u-al ...

  5. LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android

    LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...

  6. [转载]html5直接在网页上播放视频音频兼容所有浏览器

    文章给大家分享一个html5直接在网页上播放视频兼容所有浏览器,有需要的同学可参考. HTML5可以用video标签来播放视频 当前,video 元素支持三种视频格式: 格式 IE Firefox O ...

  7. ewebeditor下利用ckplayer增加html5 (mp4)全平台的支持

    学校数字化平台富文本编辑器一直用的ewebeditor,应该说非常的好,支持常用office文档的直接导入,极大的方便了老师们资料的上传,最近在规划整个数字化校园向全平台改版,框架采用bootstra ...

  8. html5 +css3 点击后水波纹扩散效果 兼容移动端

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. html5的placeholder属性(IE如何兼容placeholder属性)

    界面UI推荐 jquery html5 实现placeholder兼容password  IE6 html5的placeholder属性(IE如何兼容placeholder属性) 2013-01-05 ...

随机推荐

  1. HTop依赖包

    htop 是一个 Linux 下的交互式的进程浏览器,可以用来替换Linux下的top命令. 1.安装HTop时需要先安装依赖包:rpmforge-release-0.5.3-1.el6.rf.x86 ...

  2. Jenkins pipeline 语法详解

    原文地址http://www.cnblogs.com/fengjian2016/p/8227532.html pipeline 是一套运行于jenkins上的工作流框架,将原本独立运行于单个或者多个节 ...

  3. cocos2dx JS 清除缓存重新编译打包安卓apk

    复制他人工程时打包出错,无法进行.或者是资源缓存问题需要重新编译删除 proj.android 工程下的三个文件夹 frameworks -> runtime-src -> proj.an ...

  4. selenium PO模式

    思想: 1.定义basepage.py用来写公共方法,比如找元素,打开url,切换frame.这样的部分都写在这里.不必每次用都重写. 2.LoginPage.py 每个功能模块一个文件或者一个类 这 ...

  5. ecshop 前台分页

    在当前需要分页的if最后div里面加入这句, <!-- #BeginLibraryItem "/library/pages.lbi" --><!-- #EndLi ...

  6. POJ 3461 Oulipo(模式串在主串中出现次数 可重叠)

    Oulipo [题目链接]Oulipo [题目类型]KMP &题意: 给你两个字符串p和s,求出p在s中出现的次数. &题解: kmpC函数就是解题的,其中也就j=nex[j]难理解一 ...

  7. 从0开始搭建vue+webpack脚手架(四)

    之前1-3部分是webpack最基本的配置, 接下来会把项目结构和配置文件重新设计,可以扩充更多的功能模块. 一.重构webpack的配置项 1. 新建目录build,存放webpack不同的配置文件 ...

  8. <2>基本表达式和语句

    1.基本表达式 1: =, +, -, *, /, 赋值,加减剩除; lua 没有 c/c++的缩写表达式 += -= *=, ++, --; 2: () 改变运算的优先级; 3: 字符串对象加法.. ...

  9. 20170918-00-(代理ip检验)

    代码集编号 20170918-00 import random #随机数模块 import urllib.request #常用爬虫模块 import time from bs4 import Bea ...

  10. python 正则基本方法

    2017-04-11 学习python,免不了应对爬虫,初学爬虫最难理解的就是正则表达式. 比如我们要爬去网页上的某些内容,就像下面这种形式: <p>safdsf</p>< ...