纯js双滑块功能
Posted zcsmile
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯js双滑块功能相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<script>
window.onload = function()
var slider1 =document.getElementById("slider1");
var slider2 =document.getElementById("slider2");
var slideTool =document.getElementById("slideTool");
var slideLeft =document.getElementById("slideLeft");
var slideRight =document.getElementById("slideRight");
var P1 =document.getElementById("p1");
//滑块1的鼠标按下事件
slider1.onmousedown=function(e)
var evt =e||event;
var x =evt.offsetX;
var y =evt.offsetY;
console.log("leftMouseDown");
//当触发滑块1鼠标按下事件时绑定鼠标移动事件
document.onmousemove=function(e)
var evt =e||event;
//根据鼠标的位置和外层的相对偏移量设置滑块的位置
slider1.style.left=evt.clientX-slideTool.offsetLeft-x+"px";
if(evt.clientX-slideTool.offsetLeft-x<=0)
slider1.style.left="0px";
if(evt.clientX-slideTool.offsetLeft-x>=300)
slider1.style.left="300px";
if(slider1.offsetLeft >= slider2.offsetLeft-10)
//slider1.style.left = slider2.style.left;
slider1.style.left = slider2.offsetLeft - 10 + "px";
//根据滑块的偏移量计算数值
var value = Math.floor(slider1.offsetLeft/10);
slideLeft.style.width=slider1.offsetLeft+"px";
value = value+1;
if(parseInt(value) < 10)
value = '0' + value;
$("#value1").text(value);
$("#value1").attr("value",value);
//当鼠标按键抬起时解绑鼠标移动事件
document.onmouseup=function()
document.onmousemove=null;
slider2.onmousedown=function(e)
var evt =e||event;
var x =evt.offsetX;
var y =evt.offsetY;
document.onmousemove=function(e)
var evt =e||event;
slider2.style.left=evt.clientX-slideTool.offsetLeft-x+"px";
if(evt.clientX-slideTool.offsetLeft-x<=0)
slider2.style.left="0px";
if(evt.clientX-slideTool.offsetLeft-x>=300)
slider2.style.left="300px";
if(slider2.offsetLeft-10 <= slider1.offsetLeft)
//slider2.style.left = slider1.style.left;
slider2.style.left = slider1.offsetLeft + 10 + "px";
var value = Math.floor(slider2.offsetLeft/10);
slideRight.style.width=slider2.offsetLeft+"px";
value = value+1 ;
if(parseInt(value) < 10)
value = '0' + value;
$("#value2").text(value);
$("#value2").attr("value",value);
document.onmouseup=function()
document.onmousemove=null;
</script>
</head>
<body>
<div id="slideToolCtrol">
<div id="slideToolBorder">
<div id="slideTitle">
<span id="titleSpan">档位</span>
</div>
<div id="slideTool" class="slideTool">
<div id="slideLeft" class="slideLeft">
<span id="slider1" class="slider1">
<span id="value1" value="01">01</span>
</span>
</div>
<div id="slideRight" class="slideRight">
<span id="slider2" class="slider2">
<span id="value2" value="31">31</span>
</span>
</div>
</div>
</div>
</div>
</body>以上是关于纯js双滑块功能的主要内容，如果未能解决你的问题，请参考以下文章