html5中input有增加type=range。这为拖动滑块提供了很大的便利。下面是他的属性：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .main{ position: relative;width: 500px;}

        #range {

            -webkit-appearance: none;

            background: #;

            height: 3px;

            outline: none;

            margin: ;

            width: 500px;

        }

        input[type=range]::-webkit-slider-thumb{

            -webkit-appearance: none;

            width: 20px;

            height: 20px;

            border-radius: %;

            background: red;

        }

        p{

            position: absolute;

            width: 0px;

            height: 3px;

            background: green;

            top: -2px;

            left: ;

        }

        .range{

            position: relative;

        }

        .value{

            padding: 10px;

            background: #ffebc7;

            font-size: 40px;

            text-align: center;

            margin:  auto;

        }

    </style>

</head>

<body>

<div class="main">

    <div class="value"></div>

    <div class="range">

        <input type="range" max="" min="" id="range" step="0.1" value="">

        <p></p>

    </div>

</div>

</body>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script>

    $(".value").html("")

    var rangeSwitch=function () {

        var x=$("#range").val();

        $("p").css({"width":(x/)**0.96})//乘的0.96是因为要不然绿色的颜色会有部分盖住滑动按钮（500-20）/500=0.96;

        $(".value").html(x)

    }

    $("#range").on("input",rangeSwitch)

</script>

</html>

html5拖动滑块的更多相关文章

  1. js+css3+HTML5拖动滑块(type="range")改变值

    最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...

  2. HTML5 拖动

    触发的事件有:dragstart事件.drag事件和dragend事件. 按下鼠标键并开始移动鼠标的时候,会在被拖拽的元素上触发dragstart事件.这时候光标变成”不能放”符号(圆环中有一条反斜线 ...

  3. jQuery手机触屏拖动滑块验证跳转插件

    HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...

  4. 非常酷的jQuery/HTML5图片滑块特效 带弹性菜单

    新的一周刚刚开始,当我迷迷糊糊坐在办公桌前时,又不自主的去看了一些jQuery和HTML5的应用插件,今天我们来看一款非常酷的jQuery/HTML5图片滑块特效,这款插件的特点是图片上不错的弹性菜单 ...

  5. 原生js实现拖动滑块验证

    拖动滑块验证是现在的网站随处可见的,各式各样的拖动法都有. 下面实现的是某宝的拖动滑块验证: <!DOCTYPE html> <html lang="en"> ...

  6. [Android实例] 拖动滑块进行图片拼合验证方式的实现

    该篇文章从eoeAndroid搬迁过来的,原文地址:[Android实例] 拖动滑块进行图片拼合验证方式的实现 现在网站上有各种各样的验证码验证方式,比如计算大小,输入图片内容等,今天在一家网站上看到 ...

  7. js 拖动滑块验证

    备注:拖动滑块时尽量平移,chrome浏览器上没有卡顿情况,但是搜狗极速模式和360极速模式都遇到了卡顿,拖不动情况,应是浏览器内部对事件响应速度导致吧. JS代码: ;(function ($,wi ...

  8. seekBar拖动滑块

    中秋节学习,, 通过拖动滑块,改变图片的透明度 <?xml version="1.0" encoding="utf-8"?> <LinearL ...

  9. 原生JS实现拖动滑块验证登录效果

    ♀分享一组利用原生JS实现拖动滑块验证效果 ♀在这个组代码中涉及三个方面的知识: ⑴事件处理 ⑵添加验证标记 ⑶选择器的封装   代码如下: <!DOCTYPE html> <htm ...

随机推荐

  1. 单元测试JUnit4 Ctrl + Shift + T

    单元测试 public class Calculator { public int result = 0; public int add(int operandl, int operand2) { r ...

  2. 网络流量分析——NPMD关注IT运维、识别宕机和运行不佳进行性能优化。智能化分析是关键-主动发现业务运行异常。科来做APT相关的安全分析

    科来 做流量分析,同时也做了一些安全分析(偏APT)——参考其官网:http://www.colasoft.com.cn/cases-and-application/network-security- ...

  3. <十四>UML核心视图静态视图之类图和包图

    一:类图(行为类和实体类) --->类图用于展示系统中的类及其相互之间的关系 --->概念层类图 --->说明层类图   二:概念层类图 --->概念层的观点认为:在这个层次的 ...

  4. CSS：CSS 单位

    ylbtech-CSS:CSS 单位 1.返回顶部 1. 尺寸 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例如, ...

  5. Python interview_python

    https://github.com/taizilongxu/interview_python 1 Python的函数参数传递 strings, tuples, 和numbers是不可更改的对象,而l ...

  6. MFC在对话框中的Picture contrl控件中添加icon图标，并改变icon图标的背景色与对话框背景色一致

    1.在对话框添加Picture Contrl 控件 2.选中控件,修改ID为IDC_STATIC_PICTURE 和 Type属性为icon 其图标改为 3.添加变量m_picture变量名是灰色,说 ...

  7. 方法名的string类型应用（补）

    string strClass = "stringConvertClass.test"; //命名空间+类名 string strMethod = "Method&quo ...

  8. Ladies' Shop

    题意: 有 $n$ 个包,设计最少的物品体积(可重集),使得 1. 对于任意一个总体积不超过给定 $m$ 的物体集合有其体积和 恰好等于一个包的容量. 2.对于每一个包,存在一个物品集合能恰好装满它. ...

  9. Git（二）--常用命令

    $ git init  从当前目录初始化 $ git clone git://xxxx  从远程仓库克隆 $ git status 确定哪些文件当前处于什么状态 $ git add 开始跟踪一个新文件 ...

  10. 【HBase】HBase笔记：HBase的Region机制

    HBase 的机制里包含了许多优秀的算法,如 Region 定位.Region 分配.Region Server的上线和下线.Master 的上线和下线.在谈到这些之前,先把 HBase 的基本架构里 ...