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. 简单封装微信小程序

    一.不同环境配置封装 新建config文件夹,根据自己有不同环境设置不同的js文件 具体js文件内容: exports.config = { requestHost: 'https://******. ...

  2. CyclicBarrier及CountDownLatch的使用

    CountDownLatch位于java.util.concurrent包下,是JDK1.5的并发包下的新特性. 首先根据Oracle的官方文档看看CountDownLatch的定义: A synch ...

  3. Dom4j 操作文件，文件相对路径的问题

    System.out.println("xml路径:"+ServletActionContext.getServletContext().getRealPath("/zx ...

  4. 「LuoguP3379」 【模板】最近公共祖先（LCA）

    题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入输出格式 输入格式: 第一行包含三个正整数N.M.S,分别表示树的结点个数.询问的个数和树根结点的序号. 接下来N-1行每 ...

  5. [SPOJ1557] Can you answer these queries II

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2482 [算法] 线段树维护历史最值 时间复杂度 : O(NlogN) [代码] #i ...

  6. bzoj3676

    后缀自动机+manacher 听说本质不同的回文串只有O(n)个 那么用manacher求出所有回文串,然后在sam上查找出现了几次就行了 sam的性质又忘了... manacher也忘了... #i ...

  7. Dreamweaver cs6 的安装与破解

    网上找的教程http://jingyan.baidu.com/article/9f7e7ec08383b26f281554f4.html,亲测无误 只需点击试用安装即可 破解只需替换amtlib.dl ...

  8. 关于checkbox对应一张表时如何遍历

    html代码: <table> <tr> <td><input name='one' type='checkbox' value='1'/></t ...

  9. @Conditional注解的作用

    @Conditional是用有条件的加载bean. @Configuration public class TestBeanConfig { // 根据条件创建, 条件写在TestConditiona ...

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

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