JavaScript实现美化滑块效果

渐渐地,那原本被夜幕笼罩的天空出现了微明。一颗颗启明星逐渐变得苍白无力,在浅浅的日光的照射下,胆怯的它们终于退却了。随着启明星的消失,害羞的太阳射出了几道耀眼的金光。

本文实例为大家分享了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实现美化滑块效果。在很多人看来,失败是可耻的,但其实,失败才是常态。更多关于JavaScript实现美化滑块效果请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
js拖动滑块和点击水波纹效果实例代码

Angular.js通过自定义指令directive实现滑块滑动效果

jQuery实现的滑块滑动导航效果示例

微信小程序实现带刻度尺滑块功能

微信小程序 开发之滑块视图容器(swiper)详解及实例代码