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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
js操作select控件的几种方法
Jun 02 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
Apr 10 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 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
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
动态加载iframe
2006/06/16 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
玩转方法:call和apply
2014/05/08 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
EsLint入门学习教程
2017/02/17 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
深入理解Python对Json的解析
2017/02/14 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
英语文学专业学生的自我评价
2013/10/31 职场文书
大型活动组织方案
2014/05/10 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
邓小平理论心得体会
2014/09/09 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
导游词幽默开场白
2019/06/26 职场文书
php修改word的实例方法
2021/11/17 PHP
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript