JavaScript实现美化滑块效果


Posted in Javascript onMay 17, 2019

本文实例为大家分享了js实现美化滑块效果的具体代码,供大家参考,具体内容如下

美化滑块(拖动)

隐藏原有的range 同步value

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>滑块</title>
  <style>
    .len{
      width: 300px;
      height: 6px;
      background: #6c6;
      border-radius: 3px;
      margin-top:15px;
      position: relative;
    }
    .len b{
      display: inline-block;
      height: 6px;
      border-radius: 3px;
      background: #900;
      position: absolute;
    }
    .len span{
      position: absolute;
      width: 10px;
      height: 10px; 
      border-radius: 5px;
      background: #090;
      z-index: 1;
      top: -2px;
      left: 0;
    }
    .len input[type=range]{
      display: none;
    }
  </style>
</head>
<body>
  <input type="range" min="0" max="500" value="0">
  <input type="range" min="0" value="0">
  <script>
    var ranges=document.querySelectorAll("input[type=range]");
    ranges.forEach(function(range){
      var Div=document.createElement("div");
      Div.className="len";
      range.parentNode.insertBefore(Div,range);
      var span=document.createElement("span");
      var b=document.createElement("b");
      Div.appendChild(span);
      Div.appendChild(b);
      Div.appendChild(range);
      span.onmousedown=function(e){
        var x=e.clientX-this.offsetLeft;
        var maxL=Div.offsetWidth-span.offsetWidth;
        var maxV=range.max || 100;
        document.onmousemove=function(e){
          var les=e.clientX-x;
          if(les < 0)les=0;
          if(les > maxL)les=maxL;
          span.style.left=les+"px";
          b.style.width=les+span.offsetWidth/2+"px";
          range.value=les/maxL*maxV;   //同步
          e.preventDefault();       //阻止默认事件
          console.log(range.value)
        }
        document.onmouseup=function(){
          document.onmousemove=null;
          document.onmouseup=null;
        }
      }
    })
  </script>
</body>
</html>

插件都可以无限复制,删除即是原有效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
JsRender实用入门教程
Oct 31 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 #Javascript
vue中引入mxGraph的步骤详解
May 17 #Javascript
微信小程序云开发 搭建一个管理小程序
May 17 #Javascript
微信小程序云开发实现增删改查功能
May 17 #Javascript
微信小程序云开发实现云数据库读写权限
May 17 #Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 #Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 #Javascript
You might like
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
Session的工作方式
2006/10/09 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
PHP类的特性实例分析
2016/09/28 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
php如何获取Http请求
2020/04/30 PHP
window.opener用法和用途实例介绍
2013/08/19 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
python实现按行分割文件
2019/07/22 Python
python pygame实现球球大作战
2019/11/25 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
PHP开发的一般流程
2013/08/13 面试题
Java如何支持I18N?
2016/10/31 面试题
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
生产厂厂长岗位职责
2013/12/25 职场文书
个人汇报材料范文
2014/12/30 职场文书
汽车转让协议书
2015/01/29 职场文书
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL