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. java引用问题（—）

    为了美观起见,将说明性问题用注释引起来,这样只是为了美观 基本的类型只有一块存储空间(stack中),而引用类型在内存中有两块存储空间(stack和heap中). public class test ...

  2. Python：元组

    元组:只读,不能修改,使用小括号 创建元组: tup1 = ('physics', 'chemistry', 1997, 2000) tup2 = (1, 2, 3, 4, 5 ) tup3 = &q ...

  3. springMVC之HttpServletRequest的getParameterMap()

    request.getParameterMap()的返回类型是Map类型的对象,也就是符合key-value的对应关系,但这里要注意的是,value的类型是String[],而不是String. 得到 ...

  4. python装饰器执行顺序

    . python 装饰器 1) 2层装饰器 def decorator(func): # TODO def wrapper(*args, **kwargs): # TODO func(*args, * ...

  5. java并发之阻塞队列LinkedBlockingQueue与ArrayBlockingQueue

    Java中阻塞队列接口BlockingQueue继承自Queue接口,并提供put.take阻塞方法.两个主要的阻塞类实现是ArrayBlockingQueue和LinkedBlockingQueue ...

  6. javascript闭包和闭包的几种写法和用法

    什么是闭包 闭包,官方的解释是:一个拥有需要许多变量和绑定了这=这些变量的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点: 1 作为一个函数变量的引用,当函数返回时,其处于激活 ...

  7. Flutter实战视频-移动电商-42.详细页_UI主页面架构搭建

    42.详细页_UI主页面架构搭建 详细分成六大部分拆分开 body里面用FutureBuilder异步加载. FutureBuilder里面的furure属性这里用一个方法,必须返回的也是future ...

  8. css3 display:box 属性

    先看例子: .ub{ display: -webkit-box !important; display: box !important; position:relative;}.ub-f1{ posi ...

  9. UTF-8和Unicode互转

    1.Unicode转UTF-8 void CodeCovertTool::UNICODE_to_UTF8(const CString& unicodeString, std::string&a ...

  10. HDOJ2579，BFS（三维数组标记）

    三维数组对于我这个萌萌的新手来说真是酷酷的,帅到不行,,, 三维数组前面还看到空间的哪一题HDOJ1240,这一题时间上的标记,更酷了!!! 不说废话了,贴一发代码: #include <std ...