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. html5--5-9 绘制扇形

    html5--5-9 绘制扇形 学习要点 综合运用已经学过的知识绘制一个扇形 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y,w,h) 绘制矩形(无 ...

  2. Java中的final和static

    final final可以用在类.方法.变量上. 1.final用在类上,表明当前类它不能被继承,没有子类. 2.final用在方法上,表明当前方法不能被override,不能被重写. 3.final ...

  3. RAM的分类

    转载自:http://wenku.baidu.com/view/b17d73244b35eefdc8d333ab.html RAM(随机存储器)可以分为SRAM(静态随机存储器)和DRAM(动态随机存 ...

  4. [置顶] 谈EXPORT_SYMBOL使用

    转自:http://blog.csdn.net/macrossdzh/article/details/4601648 EXPORT_SYMBOL只出现在2.6内核中,在2.4内核默认的非static ...

  5. JS获取元素的offsetTop,offsetLeft等相关属性

    1. obj.clientWidth //获取元素的宽度 obj.clientHeight //元素的高度 obj.offsetLeft //元素相对于父元素的left obj.offsetTop / ...

  6. 有关map中使用iterate迭代器遍历的不保序问题和list remove(object)的细节问题

    今天在做项目的过程中发现了如下两个问题: 一 使用map的iterator迭代器对map进行遍历得到的结果是不保序的,也就是每次输出结果都是不一样的.针对这个问题,看以下iterator迭代器的源码. ...

  7. CF-799A

    A. Carrot Cakes time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

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

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

  9. ASP.NET Core会议管理平台实战_汇总贴

    ASP.NET Core会议管理平台实战 课程地址:https://ke.qq.com/course/389673?from=800004097#term_id=100464670 ASP.NET C ...

  10. 为何在有 DOCTYPE 的 HTML 文档之上仍然还会出现混杂模式?

    不使用 DOCTYPE 一定会使 HTML 文档处于混杂模式,然而使用了 DOCTYPE,也不一定就能够使文档在所有浏览器中均处于标准模式. DOCTYPE 本身不就是一个“开关”吗?为何在有 DOC ...