准备将自己做的滑动条效果都放在这篇博文下。
自己的第一个成果
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; }
原标题:滑动条效果
关键词: