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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .main{ position: relative;width: 500px;}
  8.         #range {
  9.             -webkit-appearance: none;
  10.             background: #;
  11.             height: 3px;
  12.             outline: none;
  13.             margin: ;
  14.             width: 500px;
  15.         }
  16.         input[type=range]::-webkit-slider-thumb{
  17.             -webkit-appearance: none;
  18.             width: 20px;
  19.             height: 20px;
  20.             border-radius: %;
  21.             background: red;
  22.         }
  23.         p{
  24.             position: absolute;
  25.             width: 0px;
  26.             height: 3px;
  27.             background: green;
  28.             top: -2px;
  29.             left: ;
  30.         }
  31.         .range{
  32.             position: relative;
  33.         }
  34.         .value{
  35.             padding: 10px;
  36.             background: #ffebc7;
  37.             font-size: 40px;
  38.             text-align: center;
  39.             margin:  auto;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44. <div class="main">
  45.     <div class="value"></div>
  46.     <div class="range">
  47.         <input type="range" max="" min="" id="range" step="0.1" value="">
  48.         <p></p>
  49.     </div>
  50. </div>
  51. </body>
  52. <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  53. <script>
  54.     $(".value").html("")
  55.     var rangeSwitch=function () {
  56.         var x=$("#range").val();
  57.         $("p").css({"width":(x/)**0.96})//乘的0.96是因为要不然绿色的颜色会有部分盖住滑动按钮（500-20）/500=0.96;
  58.         $(".value").html(x)
  59.     }
  60.     $("#range").on("input",rangeSwitch)
  61. </script>
  62. </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. python写excel

    例一,普通写入: # -*-coding: utf-8-*- import xlwt workbook = xlwt.Workbook() sheet = workbook.add_sheet('sh ...

  2. plsql导入cvs 时提示missing right parenthesis

    删除自动生成的时间格式值,如:SQL function框里自动生成的值

  3. bzoj 3027 [Ceoi2004] Sweet —— 生成函数

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3027 就是 (1+x+x2+...+xm[i]) 乘起来: 原来想和背包一样做,然而时限很短 ...

  4. 实用的MVVM：ImageView

    最近在学习WPF,遇到一本入门好书,推荐给大家<Windows Presentation Foundation 4.5 Cookbook> 做项目首先要从MVVM开始,现在把他的Simpl ...

  5. vuex 命名空间

    默认情况下,模块内部的action mutation getter是注册在全局命名空间的,如果希望你的模块具有更高的封装度和复用性,你可以通过添加namespaced:true的方式使其成为带命名空间 ...

  6. CF-805B

    B. 3-palindrome time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  7. matlab白底换红底

    白底换红底 局部阈值调整 边界高斯滤波 function demo global R global threshold global img global dstColor global rect g ...

  8. DLL中加载其它DLL使用LoadLibrary加载动态库失败的解决办法

    方式一 采用LoadLibraryEx 若DLL不在调用方的同一目录下,可以用LoadLibrary(L"DLL绝对路径")加载.但若调用的DLL内部又调用另外一个DLL,此时调用 ...

  9. 数据结构关于AOV与AOE网的区别

    AOV网,顶点表示活动,弧表示活动间的优先关系的有向图. 即如果a->b,那么a是b的先决条件. AOE网,边表示活动,是一个带权的有向无环图, 其中顶点表示事件,弧表示活动,权表示活动持续时间 ...

  10. Ogre 学习记录

    http://www.cppblog.com/richardhe/articles/55722.html 1: 设计初衷 它设计初衷是完全跨平台的.抽象的接口隐藏了平台相关的细节. 它设计初衷是大幅度 ...