滑动条效果

准备将自己做的滑动条效果都放在这篇博文下。

自己的第一个成果

css

body{    background: black;  }  #slider_1{    width: 400px;    height: 2px;    border-radius: 1px;    display: -webkit-flex;    position: relative;    margin: 30px auto;  }    #oSlider{    width: 15px;    height: 15px;    position: absolute;    border: 1px solid rgb(249,247,107);    border-radius: 10px;    background: rgb(249,247,107);    top: -7px;  }  #slider_11{    -webkit-flex:1;    background: rgb(249,247,107);    border-radius: 1px 0 0 1px;  }  #slider_12{    -webkit-flex:1;    background: rgba(255,255,255,0.3);    border-radius: 0 1px 1px 0px;  }

html

<div id="slider_1">    <div id="slider_11"></div>    <span id="oSlider"></span>    <div id="slider_12"></div>  </div>  

js

var slider_1=document.getElementById("slider_1");  var oSlider=document.getElementById("oSlider");  var width=400;  var min=-7;  var max=393;  var drag=false;  var slider_11=document.getElementById("slider_11");  var slider_12=document.getElementById("slider_12");  slider_1.onclick=function(){    var ewidth=event.clientX-slider_1.offsetLeft;    console.log(ewidth);    slider_11.style["-webkit-flex"]=ewidth/width;    slider_12.style["-webkit-flex"]=(width-ewidth)/width;    oSlider.style.left=ewidth+"px";        }  oSlider.onmousedown=function(){    drag=true;  }  document.onmousemove=function(){    if(drag){    var ewidth=event.clientX-slider_1.offsetLeft;    if(ewidth<=min||ewidth>=max) return false;    console.log(ewidth);    slider_11.style["-webkit-flex"]=ewidth/width;    slider_12.style["-webkit-flex"]=(width-ewidth)/width;    oSlider.style.left=ewidth+"px";    }  }  document.onmouseup=function(){    drag=false;  }

原标题：滑动条效果

关键词：