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. 10个常见的 Android 新手误区

    在过去十年的移动开发平台中,作为资深的移动开发人员,我们认为Android平台是一个新手最广为人知的平台.它不仅是一个廉价的工具,而且有着良好的开发社区,以及从所周知的编程语言(Java),使得开发A ...

  2. codeforces A. Point on Spiral 解题报告

    题目链接:http://codeforces.com/problemset/problem/279/A 题目意思:给出一个坐标点(x, y),问当从(0, 0) 开始到达该点转过的拐角有多少个.(拐角 ...

  3. Python：递归

    递归两个基本要素: (1) 边界条件:确定递归到何时终止,也称为递归出口. (n = 1)(2) 递归模式:大问题是如何分解为小问题的,也称为递归体.(n*(n-1)!   n>1) 例:累加 ...

  4. TCPDUMP 使用详情

    第一种是关于类型的关键字,主要包括host,net,port, 例如 host 210.27.48.2,指明 210.27.48.2是一台主机,net 202.0.0.0 指明 202.0.0.0是一 ...

  5. AutoIt：应用WMI接口，打印远程机器安装的所有应用程序

    Dim $computer ="computer name" Dim $Remoteuser ="Login account" Dim $Remotepass ...

  6. 深度学习之卷积神经网络（CNN）学习

    1.卷积神经网络中卷积的核心意义是什么?每一组卷集核 权重是一个抽特征的滤波器, 从卷集核的角度抽取特征 2.卷积神经网络很好的特性参数共享机制每一个神经元固定一组a x b x c(图像的通道数) ...

  7. 利用openssl进行base64的编码与解码

    openssl可以直接使用命令对文件件进行base64的编码与解码,利用openssl提供的API同样可以做到这一点. 废话不多说,直接上代码了.需要注意的是通过base64编码后的字符每64个字节都 ...

  8. bzoj 2655 calc —— 拉格朗日插值

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2655 先设 f[i][j] 表示长度为 i 的序列,范围是 1~j 的答案: 则 f[i][ ...

  9. hihoCoder2月29日(字符串模拟)

    时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 给定两个日期,计算这两个日期之间有多少个2月29日(包括起始日期). 只有闰年有2月29日,满足以下一个条件的年份为闰年: ...

  10. CSS元素:clip属性作用说明

    clip属性是一个比较有用的属性,但往往在实际应用中,并不多见,介绍的也很少.应用clip属性需要注意的两点: 一.clip属性必须和定位属性postion一起使用才能生效. 二.clip裁切的计算坐 ...